/*
 * SmartGrid Global Design Tokens
 * 來源：docs/design-tokens.md（鋒岳潔能 EMS Design Tokens v1.0）
 * 所有頁面共用，在 _Layout.cshtml 中排在最前載入。
 * ⚠️ 禁止在任何 .cshtml / .css 中 hardcode 本檔定義的色彩值。
 *
 * CSS Cascade Layers 宣告（Phase 1-4 逐步啟用）
 * 目前：tokens 層啟用；component / override 層預留供未來遷移
 */
@layer tokens, components, overrides;
:root {
    /* ── Brand Gradient ──────────────────────────────── */
    --gradient-primary:   linear-gradient(135deg, #1CD3D3 0%, #1565C0 100%);
    --gradient-primary-v: linear-gradient(180deg, #1CD3D3 0%, #1565C0 100%);
    --gradient-header:    linear-gradient(90deg,  #29D4D4 0%, #1565C0 100%);
    --gradient-menu-bg:   linear-gradient(135deg, #18CFCF 0%, #1A6EC0 100%);

    /* ── Cyan ─────────────────────────────────────────── */
    --color-cyan-400: #26D4D4;
    --color-cyan-500: #00BCD4;
    --color-cyan-600: #00ACC1;
    --color-cyan-700: #0097A7;

    /* ── Blue ─────────────────────────────────────────── */
    --color-blue-400: #2596e6;   /* 單色主要藍（primary single color）*/
    --color-blue-500: #1976D2;
    --color-blue-600: #1565C0;   /* 漸層深藍端（gradient dark end only）*/
    --color-blue-700: #0D47A1;

    /* ── Neutral ──────────────────────────────────────── */
    --color-white:    #FFFFFF;
    --color-gray-50:  #F8F9FA;
    --color-gray-100: #F1F3F5;
    --color-gray-200: #E9ECEF;
    --color-gray-300: #CED4DA;
    --color-gray-400: #ADB5BD;
    --color-gray-500: #868E96;
    --color-gray-600: #6C757D;
    --color-gray-700: #495057;
    --color-gray-800: #343A40;
    --color-gray-900: #212529;

    /* ── Semantic ─────────────────────────────────────── */
    --color-status-normal:  #26D4C8;
    --color-status-warning: #FFA726;
    --color-status-error:   #EF5350;
    --color-status-info:    #1976D2;
    --color-success:        #10B981;

    /* ── 能源資料固定色（禁止修改順序）─────────────────── */
    --color-data-grid:    #8E9EAB;   /* 台電 */
    --color-data-storage: #26D4C8;   /* 儲能 */
    --color-data-solar:   #FFA726;   /* 太陽能 */
    --color-data-water:   #29B6F6;   /* 水量 */
    --color-green-ratio:  #8BC34A;   /* 綠電佔比 */

    /* ── Control 頁面模式顏色 ─────────────────────────── */
    --color-mode-arbitrage:  #EAB308;
    --color-mode-peak:       #F97316;
    --color-mode-schedule:   #60A5FA;
    --color-mode-demand:     #EF5350;
    --color-mode-dr:         #8B5CF6;
    --color-mode-reserve:    #14B8A6;
    --color-mode-device:     #475569;
    --color-mode-manual:     #6B7280;
    --color-mode-ai:         #EC4899;

    /* ── Action Buttons ───────────────────────────────── */
    --color-btn-edit:   #26D4C8;
    --color-btn-delete: #EF5350;
    --color-btn-add:    #1976D2;

    /* ── Surfaces ─────────────────────────────────────── */
    --surface-page: #F8F9FA;
    --surface-card: #FFFFFF;

    /* ── Typography ───────────────────────────────────── */
    --font-base: 'Noto Sans TC', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    --font-mono: 'Roboto Mono', 'Courier New', monospace;

    --text-xs:   11px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   20px;
    --text-2xl:  24px;
    --text-3xl:  32px;
    --text-4xl:  48px;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:   1.2;
    --leading-snug:    1.4;
    --leading-normal:  1.5;
    --leading-relaxed: 1.6;

    /* ── Spacing (base-8) ─────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Shape ────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* ── Elevation ────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

    /* ── Z-Index ──────────────────────────────────────── */
    --z-card:     10;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-tooltip:  300;
    --z-overlay:  400;
    --z-modal:    500;

    /* ── Animation ────────────────────────────────────── */
    --duration-instant: 100ms;
    --duration-fast:    150ms;
    --duration-normal:  200ms;
    --duration-slow:    300ms;
    --duration-enter:   350ms;
    --ease-out:   cubic-bezier(0,   0,   0.2, 1);
    --ease-in:    cubic-bezier(0.4, 0,   1,   1);
    --ease-inout: cubic-bezier(0.4, 0,   0.2, 1);
    --ease-spring:cubic-bezier(0.34,1.56,0.64,1);

    /* ── Surface / Background ────────────────────────── */
    --surface-page:  #f4f7f9;   /* body 背景（淡灰藍）*/
    --surface-card:  #ffffff;

    /* ── SmartGrid Aliases ────────────────────────────── */
    --secondary-gradient: var(--gradient-header);  /* .bg-fy 使用 */
    --primary-blue:       var(--color-blue-500);   /* 舊版 hardcode 對應 */

    /* ── Icons ────────────────────────────────────────── */
    --icon-xs:  14px;
    --icon-sm:  16px;
    --icon-md:  20px;
    --icon-lg:  24px;
    --icon-xl:  32px;
    --icon-2xl: 48px;

    /* ════════════════════════════════════════════════════
       Component Semantic Tokens
       將原始 token 組合為元件語意，由 overrides.css
       和各元件 CSS 引用，避免直接使用原始值。
       ════════════════════════════════════════════════════ */

    /* ── Button（通用）────────────────────────────────── */
    --btn-radius:          var(--radius-full);    /* 品牌 pill 形狀 */
    --btn-font-size:       var(--text-sm);        /* 12px (MK 預設) */
    --btn-font-weight:     var(--weight-medium);
    --btn-padding-y:       12px;
    --btn-padding-x:       30px;
    --btn-transition:      var(--duration-normal) var(--ease-inout);

    /* ── Button Variants ────────────────────────────── */
    --btn-primary-bg:      var(--color-blue-400);   /* #2596e6 */
    --btn-primary-color:   #ffffff;
    --btn-primary-border:  var(--color-blue-400);
    --btn-primary-hover-bg:var(--color-blue-500);   /* #1976D2 */

    --btn-danger-bg:       var(--color-status-error);
    --btn-danger-color:    #ffffff;
    --btn-danger-border:   var(--color-status-error);

    --btn-cancel-bg:       var(--color-gray-600);
    --btn-cancel-color:    #ffffff;
    --btn-cancel-border:   var(--color-gray-600);

    --btn-outline-radius:  var(--radius-md);

    /* ── DTE Modal Buttons（獨立，小圓角）──────────────── */
    --dte-btn-radius:      var(--radius-md);      /* 8px，非 pill */
    --dte-btn-font-size:   var(--text-sm);
    --dte-btn-padding-y:   var(--space-2);
    --dte-btn-padding-x:   var(--space-4);
    --dte-btn-create-bg:   var(--color-blue-600);
    --dte-btn-create-color:#ffffff;
    --dte-btn-edit-bg:     var(--color-blue-600);
    --dte-btn-edit-color:  #ffffff;
    --dte-btn-delete-bg:   var(--color-status-error);
    --dte-btn-delete-color:#ffffff;
    --dte-btn-cancel-bg:   var(--color-gray-100);
    --dte-btn-cancel-color:var(--color-gray-700);
    --dte-btn-cancel-border:var(--color-gray-300);

    /* ── DTE Modal ──────────────────────────────────── */
    --dte-header-bg:       var(--gradient-header);
    --dte-header-color:    #ffffff;
    --dte-header-radius:   var(--radius-lg) var(--radius-lg) 0 0;
    --dte-footer-radius:   0 0 var(--radius-lg) var(--radius-lg);
    --dte-container-radius:var(--radius-lg);
    --dte-shadow:          var(--shadow-lg);
    --dte-close-size:      var(--icon-lg);        /* 24px */

    /* ── Input ──────────────────────────────────────── */
    --input-radius-mk:     0;                     /* MK underline 風格保留 */
    --input-radius-box:    var(--radius-md);      /* date/time/number 用 */
    --input-border-color:  var(--color-gray-300);
    --input-focus-color:   var(--color-cyan-500);
    --input-font-size:     var(--text-base);
    --input-color:         var(--color-gray-800);
    --input-bg:            #ffffff;

    /* ── Card ───────────────────────────────────────── */
    --card-radius:         var(--radius-lg);
    --card-shadow:         var(--shadow-md);
    --card-bg:             var(--surface-card);
    --card-border:         var(--color-gray-200);
    --card-header-bg:      var(--gradient-header);
    --card-header-color:   #ffffff;
    --card-header-radius:  var(--radius-full);    /* 圓形 header pill */
    --card-header-padding: var(--space-2) var(--space-3);

    /* ── Modal ──────────────────────────────────────── */
    --modal-radius:        var(--radius-lg);
    --modal-shadow:        var(--shadow-lg);
    --modal-header-bg:     var(--gradient-primary);
    --modal-header-color:  #ffffff;
    --modal-header-radius: var(--radius-lg) var(--radius-lg) 0 0;

    /* ── Table ──────────────────────────────────────── */
    --table-border-color:  var(--color-gray-200);
    --table-header-border: var(--color-gray-300);
    --table-stripe-bg:     var(--color-gray-50);
    --table-radius:        var(--radius-md);
    --table-cell-padding-y:var(--space-2);
    --table-cell-padding-x:var(--space-3);

    /* ── DataTables ─────────────────────────────────── */
    --dt-filter-border:    var(--color-blue-500);
    --dt-filter-radius:    var(--radius-md);
    --dt-header-border:    var(--color-blue-500);
    --dt-pagination-active-bg:   var(--color-blue-500);
    --dt-pagination-active-border:var(--color-blue-500);
    --dt-scrollbar-thumb:  var(--color-blue-500);
    --dt-scrollbar-width:  6px;

    /* ── Badge ──────────────────────────────────────── */
    --badge-radius:        var(--radius-full);
    --badge-font-size:     var(--text-xs);
    --badge-font-weight:   var(--weight-medium);
    --badge-padding:       var(--space-1) var(--space-2);

    /* ── Tab ────────────────────────────────────────── */
    --tab-active-color:    var(--color-cyan-500);
    --tab-active-border:   var(--color-cyan-500);
    --tab-font-weight:     var(--weight-medium);
    --tab-font-size:       var(--text-sm);

    /* ── Navbar ─────────────────────────────────────── */
    --nav-bg:              var(--gradient-header);
    --nav-color:           #ffffff;
    --nav-radius:          var(--radius-full);
    --nav-shadow:          0 0 2px 0 rgba(0,0,0,.12), 0 2px 10px -5px rgba(0,0,0,.15);

    /* ── Bottom Nav ─────────────────────────────────── */
    --bottom-nav-bg:       rgba(255, 255, 255, 0.96);
    --bottom-nav-shadow:   0 -2px 8px rgba(0,0,0,.08);
    --bottom-nav-label-size:var(--text-xs);
    --bottom-nav-label-color:var(--color-gray-500);

    /* ── Toast ──────────────────────────────────────── */
    --toast-radius:        var(--radius-md);
    --toast-shadow:        var(--shadow-md);

    /* ── Pagination ─────────────────────────────────── */
    --pagination-active-bg:    var(--color-blue-500);
    --pagination-active-color: #ffffff;
    --pagination-radius:       var(--radius-md);

    /* ── Select2 ────────────────────────────────────── */
    --select-radius:       var(--radius-md);
    --select-border:       var(--color-gray-300);
    --select-focus-border: var(--color-blue-500);

    /* ── Progress / Gauge ───────────────────────────── */
    --gauge-track:         var(--color-gray-200);
    --gauge-soc-high:      var(--color-cyan-500);
    --gauge-soc-mid:       var(--color-status-warning);
    --gauge-soc-low:       var(--color-status-error);
    --gauge-soh-good:      var(--color-cyan-500);
    --gauge-soh-fair:      var(--color-status-warning);

    /* ── Status Indicator ───────────────────────────── */
    --status-normal:       var(--color-status-normal);
    --status-warning:      var(--color-status-warning);
    --status-error:        var(--color-status-error);
    --status-size:         10px;

    /* ── Scrollbar ──────────────────────────────────── */
    --scrollbar-width:     6px;
    --scrollbar-thumb:     var(--color-gray-400);
    --scrollbar-thumb-hover:var(--color-blue-500);
    --scrollbar-track:     var(--color-gray-100);
    --scrollbar-radius:    var(--radius-full);

    /* ── Loading ────────────────────────────────────── */
    --loading-color-start: var(--color-cyan-500);
    --loading-color-end:   var(--color-blue-500);
    --loading-size:        80px;
    --loading-border:      8px;
}

/* ── Global font-family ───────────────────────────────── */
body {
    font-family: var(--font-base);
}
code, pre, .monospace,
.sg-metric-num, .sg-gauge-val {
    font-family: var(--font-mono);
}