/**
 * Design Token — 唯一來源
 * infuture 後台管理系統（鈺晁資訊）· HTML 設計師端
 *
 * ⚠️  修改這個檔案 = 修改整個設計系統
 * 新增 Token 後，執行 /extract-tokens 同步 Markdown 文件
 *
 * 命名格式：--{類別}-{語義}-{等級}
 *
 * 歷史：
 * - v0.1.0 自 Jubo Care 個管平台 port（teal primitive + brand）
 * - v0.2.0 (2026-05-16) brand override 為 infuture 橘色
 *   見 design-system/decisions/2026-05-16_brand-color-override.md
 *   teal primitive 保留但已停用；brand 語義別名重導向至 orange
 */

:root {

  /* ─────────────────────────────────────────
   * COLOR — 顏色
   * 規範：design-system/tokens/colors.md
   * ───────────────────────────────────────── */

  /* Primitive — 品牌色板（infuture 橘色 · v0.2.0 新增）
   * 不可在 src/ 直接使用，請走 Semantic */
  --color-orange-50:   #fff3ed;
  --color-orange-100:  #ffe2d1;
  --color-orange-300:  #ffa777;
  --color-orange-400:  #ff8a52;
  --color-orange-500:  #ff6b35;   /* brand 起手值（待校色）*/
  --color-orange-600:  #f15a26;   /* hover */
  --color-orange-700:  #d44516;   /* dark */
  --color-orange-800:  #b03b13;

  /* Primitive — Tiffany 青綠（Jubo Care 遺留，本專案停用，保留以利 fork）*/
  --color-teal-50:   #e6f5f6;
  --color-teal-100:  #cdf0ed;
  --color-teal-300:  #4dccc8;
  --color-teal-400:  #26c6da;
  --color-teal-500:  #0abab5;
  --color-teal-600:  #00b0b8;
  --color-teal-700:  #0097a7;
  --color-teal-800:  #00838f;

  /* Primitive — Yellow（infuture 黃，brand 主色階）*/
  --color-yellow-50:   #fff9e0;   /* 卡片 hover / active 淡底 */
  --color-yellow-100:  #fff1b3;   /* chip 填底 */
  --color-yellow-300:  #ffde4d;
  --color-yellow-400:  #ffd633;
  --color-yellow-500:  #ffcc00;   /* brand */
  --color-yellow-600:  #e6b800;   /* hover */
  --color-yellow-700:  #997a00;   /* 文字 / chip 字色，~4.7:1 on white */
  --color-yellow-800:  #806600;

  /* Primitive — 中性灰階 */
  --color-gray-0:    #ffffff;
  --color-gray-50:   #f5f5f5;
  --color-gray-100:  #efefef;
  --color-gray-150:  #ebebeb;
  --color-gray-200:  #eeeeee;
  --color-gray-250:  #eceff1;
  --color-gray-300:  #e0e0e0;
  --color-gray-400:  #bdbdbd;
  --color-gray-500:  #858585;
  --color-gray-550:  #757575;
  --color-gray-600:  #6f6f6f;
  --color-gray-650:  #616161;
  --color-gray-700:  #455a64;
  --color-gray-800:  #37474f;
  --color-gray-900:  #000000;

  /* Primitive — 狀態色 */
  --color-green-100: #e8f5e9;
  --color-green-700: #2e7d32;
  --color-green-800: #388e3c;

  --color-red-100:   #ffebee;
  --color-red-500:   #ef5350;
  --color-red-700:   #c62828;
  --color-red-800:   #d32f2f;

  --color-amber-100: #fff8e1;
  --color-amber-600: #ed6c02;
  --color-amber-700: #ef6c00;

  --color-blue-100:  #e1f5fe;
  --color-blue-700:  #01579b;
  --color-blue-800:  #1565c0;

  /* ── Semantic：品牌（infuture 橘 · 2026-05-16 override）── */
  --color-brand-primary:        var(--color-orange-500);
  --color-brand-primary-hover:  var(--color-orange-600);
  --color-brand-primary-dark:   var(--color-orange-700);
  --color-brand-primary-light:  var(--color-orange-50);   /* 卡片 hover、淡底 */
  --color-brand-primary-subtle: var(--color-orange-100);  /* chip 填底 */

  /* 通用語義別名（指向 brand） */
  --color-primary:        var(--color-brand-primary);
  --color-primary-hover:  var(--color-brand-primary-hover);

  /* ── Semantic：表面 ── */
  --color-surface:           var(--color-gray-0);    /* 卡片、paper、sidebar */
  --color-surface-app:       var(--color-gray-200);  /* app 主背景大面積 */
  --color-surface-app-alt:   var(--color-gray-150);  /* report 面板 */
  --color-surface-tinted:    #eaf3f5;                /* page tint（paper 後背景）*/
  --color-surface-hover:     var(--color-gray-50);   /* menu / list hover */
  --color-surface-active:    var(--color-gray-100);  /* 選中 row */
  --color-surface-table-head:var(--color-gray-250);  /* 表頭 */
  --color-surface-rail-active: rgba(255, 107, 53, 0.08); /* nav rail active 背景（orange tint）*/

  /* ── Semantic：邊框 ── */
  --color-border:        var(--color-gray-300);            /* card 外框、divider */
  --color-border-strong: rgba(0, 0, 0, 0.3);               /* header 重線 */
  --color-border-focus:  var(--color-brand-primary);

  /* ── Semantic：文字 ── */
  --color-text:              var(--color-gray-900);  /* headline 主文字 */
  --color-text-body:         var(--color-gray-650);  /* card 內文（次） */
  --color-text-muted:        var(--color-gray-500);  /* 時間戳、輔助文字 */
  --color-text-tertiary:     var(--color-gray-550);  /* icon 顏色 */
  --color-text-nav-inactive: var(--color-gray-600);  /* sidebar 未選中 */
  --color-text-disabled:     #7b7b7b;
  --color-text-inverse:      var(--color-gray-0);
  --color-text-link:         var(--color-brand-primary);

  /* ── Semantic：狀態 ── */
  --color-status-normal:        var(--color-teal-400);  /* 動物正常（圖示填色） */
  --color-status-normal-text:   var(--color-green-800); /* 文字正常 */
  --color-status-warning:       var(--color-amber-600); /* StatusCard 警示 */
  --color-status-warning-text:  var(--color-amber-700);
  --color-status-abnormal:      var(--color-red-500);   /* 動物異常 */
  --color-status-abnormal-text: var(--color-red-800);   /* 文字異常 */
  --color-status-nodata:        var(--color-gray-400);

  /* ── Semantic：Tag / Chip 配色（背景 + 前景成對） ── */
  --color-tag-blue-bg:   var(--color-blue-100);
  --color-tag-blue-fg:   var(--color-blue-700);
  --color-tag-green-bg:  var(--color-green-100);
  --color-tag-green-fg:  var(--color-green-700);
  --color-tag-amber-bg:  var(--color-amber-100);
  --color-tag-amber-fg:  var(--color-amber-700);
  --color-tag-red-bg:    var(--color-red-100);
  --color-tag-red-fg:    var(--color-red-700);
  --color-tag-grey-bg:   var(--color-gray-250);
  --color-tag-grey-fg:   var(--color-gray-700);
  --color-tag-brand-bg:  rgba(255, 107, 53, 0.12);  /* 品牌淡底 chip（orange tint）*/
  --color-tag-brand-fg:  var(--color-brand-primary-dark);

  /* ── Semantic：Brand-primary 半透明 tint（按 alpha 命名） ── */
  --color-brand-primary-tint-04: rgba(255, 107, 53, 0.04);   /* 卡片選中底 */
  --color-brand-primary-tint-06: rgba(255, 107, 53, 0.06);   /* outlined btn hover */
  --color-brand-primary-tint-08: rgba(255, 107, 53, 0.08);   /* 提示底、search ctl-mini */
  --color-brand-primary-tint-12: rgba(255, 107, 53, 0.12);   /* 圖示圓底（= tag-brand-bg）*/

  /* ── Semantic：狀態邊框（成對於 status text） ── */
  --color-status-abnormal-border: rgba(239, 83, 80, 0.5);   /* 異常紅邊框 */


  /* ─────────────────────────────────────────
   * CHART — 圖表配色
   * 規範：design-system/tokens/colors.md
   * 用於 SVG 圖表、KPI donut、進度條配色、迷你長條圖等
   * ───────────────────────────────────────── */

  --chart-primary:         var(--color-orange-500);  /* #ff6b35 主要曲線 / 長條（infuture brand）*/
  --chart-secondary:       var(--color-orange-300);  /* #ffa777 次要曲線 / 堆疊 */
  --chart-warn:            var(--color-amber-600);   /* #ed6c02 警戒線、第 3 色 */
  --chart-warn-light:      #ffd54f;                  /* 前期警戒虛線 / 較淺警示邊框 */
  --chart-danger:          var(--color-red-500);     /* #ef5350 異常點 */
  --chart-danger-light:    #ef9a9a;                  /* 異常區虛線 */
  --chart-info:            #9c27b0;                  /* 圖表第 4 色（紫） */
  --chart-neutral:          var(--color-gray-400);   /* #bdbdbd 第 5 色（灰） */
  --chart-grid:            var(--color-gray-250);    /* #eceff1 網格線 / stepper 灰圓 */
  --chart-axis-text:       var(--color-gray-500);    /* #858585 軸文字、stepper inactive 字 */
  --chart-axis-text-light: #9aa0a6;                  /* 較淡軸文字 */
  --chart-bg:              #fafafa;                  /* 圖表底 */


  /* ─────────────────────────────────────────
   * TYPOGRAPHY — 字體
   * 規範：design-system/tokens/typography.md
   * ───────────────────────────────────────── */

  /* 系統字 stack（含繁中 fallback） */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
                      "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
                      "Helvetica Neue", sans-serif;
  --font-family-mono: "Source Code Pro", Menlo, Monaco, Consolas,
                      "Courier New", monospace;

  /* 字級（scale；px 等價於 rem 16 base） */
  --font-size-xs:   0.75rem;     /* 12px */
  --font-size-sm:   0.875rem;    /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg:   1.25rem;     /* 20px */
  --font-size-xl:   1.5rem;      /* 24px */

  /* 字級語義別名（對應 Jubo 設計意圖） */
  --font-size-caption: var(--font-size-xs);    /* 12px：時間戳、sidebar 標籤 */
  --font-size-body:    var(--font-size-sm);    /* 14px：正文（預設） */
  --font-size-h2:      var(--font-size-base);  /* 16px：card title、body 主要 */
  --font-size-h1:      var(--font-size-lg);    /* 20px：頁面標題 */
  --font-size-display: var(--font-size-xl);    /* 24px：KPI 大數字 */

  /* 字重 */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* 行高（unitless） */
  --line-height-tight:   1.25;
  --line-height-snug:    1.4;    /* 22px @ 14px = 1.57，但近似 1.4 用於小字 */
  --line-height-base:    1.5;
  --line-height-relaxed: 1.625;

  /* 字間距 — Jubo 用預設，不主動調整 */
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:   0.05em;  /* sidebar SECTION 標籤 */


  /* ─────────────────────────────────────────
   * SPACING — 間距（MUI 8px baseline grid）
   * 規範：design-system/tokens/spacing.md
   * ───────────────────────────────────────── */

  --spacing-0:   0;
  --spacing-1:   0.25rem;   /*  4px */
  --spacing-2:   0.5rem;    /*  8px */
  --spacing-3:   0.75rem;   /* 12px */
  --spacing-4:   1rem;      /* 16px */
  --spacing-5:   1.25rem;   /* 20px */
  --spacing-6:   1.5rem;    /* 24px */
  --spacing-8:   2rem;      /* 32px */
  --spacing-10:  2.5rem;    /* 40px */
  --spacing-12:  3rem;      /* 48px */

  /* 語義間距別名（對應 Jubo 慣用密度） */
  --spacing-xs:  var(--spacing-1);   /*  4px：icon-text 緊密 */
  --spacing-sm:  var(--spacing-2);   /*  8px：相鄰元素 */
  --spacing-md:  var(--spacing-4);   /* 16px：卡片 padding */
  --spacing-lg:  var(--spacing-6);   /* 24px：較大元件 padding */
  --spacing-xl:  var(--spacing-8);   /* 32px：章節間距 */


  /* ─────────────────────────────────────────
   * BORDER RADIUS — 圓角
   * 規範：design-system/tokens/spacing.md
   * ───────────────────────────────────────── */

  --radius-sm:   4px;     /* 預設：卡片、按鈕、輸入框 */
  --radius-md:   8px;     /* StatusCard、login card、modal */
  --radius-lg:   16px;    /* BottomNav menu paper */
  --radius-full: 9999px;  /* chip、avatar、pill */


  /* ─────────────────────────────────────────
   * SHADOW — 陰影
   * Jubo 風格極克制：絕大部分卡片 box-shadow: none
   * ───────────────────────────────────────── */

  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);   /* 微微浮起 */
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.10);  /* BottomNav menu、modal */
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.16);  /* dropdown、focus overlay */


  /* ─────────────────────────────────────────
   * TRANSITION — 動畫（極簡）
   * Jubo 規範：不用 bounce、不用 scale、不用入場動畫
   * ───────────────────────────────────────── */

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;


  /* ─────────────────────────────────────────
   * LAYOUT — 版面尺寸
   * ───────────────────────────────────────── */

  /* 固定區塊寬高（來自 Jubo 既有規範） */
  --layout-sidebar-width:    72px;    /* NavRail */
  --layout-submenu-width:    248px;   /* CaseSubMenu / SystemSubMenu */
  --layout-header-height:    64px;    /* AppBar */
  --layout-pageheader-height:        84px;   /* 預設 PageHeader */
  --layout-pageheader-height-compact: 64px;  /* compact 變體 */

  /* Z-index 層級 */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-nav:     900;
  --z-modal:   1000;
  --z-toast:   1100;


  /* ═════════════════════════════════════════════════════════════
   * Material Design 3 — System Token 對齊別名（v5 新增 · 2026-05-12）
   *
   * 目的：依 design-system/based-system.md（MUI / M3）規範，
   *   將本範本的語義 token 對齊到 M3 三層結構（reference → system → component）
   *   的 system 層命名（--md-sys-*）。
   *
   * 規則：
   * - 別名與本地 token 共存（value 相同，命名不同）
   * - 既有 32 頁 × 28 元件繼續用 var(--color-* / --spacing-* / --radius-*)
   * - 新元件可選擇使用 var(--md-sys-color-*) 對齊 MUI ecosystem
   * - 替換 Based System 時，只需重寫本區塊 → 既有頁面零改動
   *
   * 對齊基準：M3 spec @ m3.material.io（Color / Typography / Shape / Elevation / Motion）
   * 範圍：能找到語義對應的 token；非標準擴充（如 success / warning）以 m3 慣例加上 sys 命名
   * ═════════════════════════════════════════════════════════════ */

  /* ── M3 Color：Primary group（infuture 橘）─────────── */
  --md-sys-color-primary:                var(--color-brand-primary);        /* #ff6b35 */
  --md-sys-color-on-primary:             var(--color-text-inverse);          /* #ffffff */
  --md-sys-color-primary-container:      var(--color-brand-primary-light);   /* #fff3ed chip / 卡片 hover 淡底 */
  --md-sys-color-on-primary-container:   var(--color-brand-primary-dark);    /* #d44516 chip 文字 */

  /* ── M3 Color：Error group ─────────────────────────── */
  --md-sys-color-error:                  var(--color-status-abnormal-text);  /* #d32f2f 文字 / icon */
  --md-sys-color-on-error:               var(--color-text-inverse);
  --md-sys-color-error-container:        var(--color-red-100);               /* #ffebee chip 背景 */
  --md-sys-color-on-error-container:     var(--color-red-700);               /* #c62828 chip 文字 */

  /* ── M3 Color：Surface group ─────────────────────────── */
  --md-sys-color-background:             var(--color-surface-app);           /* #eeeeee app 主背景 */
  --md-sys-color-on-background:          var(--color-text);
  --md-sys-color-surface:                var(--color-surface);               /* #ffffff card / paper */
  --md-sys-color-on-surface:             var(--color-text);                  /* #000000 主文字 */
  --md-sys-color-surface-variant:        var(--color-surface-tinted);        /* #eaf3f5 paper 後背景 */
  --md-sys-color-on-surface-variant:     var(--color-text-body);             /* #6f6f6f 次文字 */
  --md-sys-color-surface-container-low:  var(--color-surface-app-alt);       /* #ebebeb report 面板 */
  --md-sys-color-surface-container:      var(--color-surface-hover);         /* #f5f5f5 menu hover */
  --md-sys-color-surface-container-high: var(--color-surface-active);        /* #efefef 選中 row */
  --md-sys-color-surface-container-highest: var(--color-surface-table-head); /* #eceff1 table head */

  /* ── M3 Color：Outline group ─────────────────────────── */
  --md-sys-color-outline:                var(--color-border-strong);         /* rgba(0,0,0,0.3) header 重線 */
  --md-sys-color-outline-variant:        var(--color-border);                /* #e0e0e0 card 外框 */

  /* ── M3 Color：Inverse group ─────────────────────────── */
  --md-sys-color-inverse-on-surface:     var(--color-text-inverse);          /* #ffffff */

  /* ── M3 Color extensions（非 m3 標準，但 MUI 與 Material Components 通用慣例）── */
  --md-sys-color-success:                var(--color-status-normal-text);    /* #388e3c 文字正常 */
  --md-sys-color-on-success:             var(--color-text-inverse);
  --md-sys-color-success-container:      var(--color-green-100);             /* #e8f5e9 */
  --md-sys-color-on-success-container:   var(--color-green-700);             /* #2e7d32 */

  --md-sys-color-warning:                var(--color-status-warning-text);   /* #ef6c00 */
  --md-sys-color-on-warning:             var(--color-text-inverse);
  --md-sys-color-warning-container:      var(--color-amber-100);             /* #fff8e1 */
  --md-sys-color-on-warning-container:   var(--color-amber-700);             /* #ef6c00 */

  --md-sys-color-info:                   var(--color-blue-800);              /* #1565c0 */
  --md-sys-color-on-info:                var(--color-text-inverse);
  --md-sys-color-info-container:         var(--color-blue-100);              /* #e1f5fe */
  --md-sys-color-on-info-container:      var(--color-blue-700);              /* #01579b */

  /* ── M3 Typography：Type Scale 對齊 ───────────────────────── */
  /* M3 spec 對應：
   *   display-small (36) / headline-small (24) / title-large (22)
   *   title-medium (16)  / body-large (16)     / body-medium (14)
   *   label-medium (12)  / label-small (11)
   * 本範本 5 級 scale 對齊到最接近的 m3 typescale：
   *   xs   12 → label-small
   *   sm   14 → body-medium
   *   base 16 → body-large / title-medium
   *   lg   20 → title-large（22 略近）
   *   xl   24 → headline-small
   */
  --md-sys-typescale-label-small-size:   var(--font-size-xs);      /* 12 */
  --md-sys-typescale-body-medium-size:   var(--font-size-sm);      /* 14 */
  --md-sys-typescale-body-large-size:    var(--font-size-base);    /* 16 */
  --md-sys-typescale-title-medium-size:  var(--font-size-base);    /* 16 (= card title) */
  --md-sys-typescale-title-large-size:   var(--font-size-lg);      /* 20 (page title) */
  --md-sys-typescale-headline-small-size: var(--font-size-xl);     /* 24 (KPI display) */

  --md-sys-typescale-body-medium-weight: var(--font-weight-regular);   /* 400 */
  --md-sys-typescale-title-medium-weight:var(--font-weight-medium);    /* 500 */
  --md-sys-typescale-title-large-weight: var(--font-weight-semibold);  /* 600 */
  --md-sys-typescale-headline-small-weight: var(--font-weight-bold);   /* 700 */

  --md-sys-typescale-body-medium-line-height: var(--line-height-base); /* 1.5 */
  --md-sys-typescale-label-small-line-height: var(--line-height-snug); /* 1.4 */

  /* ── M3 Shape：Corner ────────────────────────────────── */
  /* m3 spec：none(0) / extra-small(4) / small(8) / medium(12) / large(16) / extra-large(28) / full
   * 本範本 4 級對齊：sm(4)→extra-small、md(8)→small、lg(16)→large、full→full */
  --md-sys-shape-corner-none:        0;
  --md-sys-shape-corner-extra-small: var(--radius-sm);    /* 4px  card / btn / input */
  --md-sys-shape-corner-small:       var(--radius-md);    /* 8px  modal / login-card */
  --md-sys-shape-corner-large:       var(--radius-lg);    /* 16px menu paper */
  --md-sys-shape-corner-full:        var(--radius-full);  /* chip / avatar / pill */

  /* ── M3 Elevation：Level（單軸） ───────────────────────── */
  /* m3 spec：level0..level5（6 階）。本範本 4 階對齊到 0/1/3/5 */
  --md-sys-elevation-level0: var(--shadow-none);   /* 預設無陰影 */
  --md-sys-elevation-level1: var(--shadow-sm);     /* 微微浮起 */
  --md-sys-elevation-level3: var(--shadow-md);     /* modal / BottomNav menu */
  --md-sys-elevation-level5: var(--shadow-lg);     /* dropdown / focus overlay */

  /* ── M3 Motion：Duration ─────────────────────────────── */
  /* m3 spec（毫秒）：short1=50 / short2=100 / short3=150 / short4=200
   *               medium1=250 / medium2=300 / medium3=350 / medium4=400
   * 本範本 3 階對齊：fast(120)→short2、base(200)→short4、slow(300)→medium2 */
  --md-sys-motion-duration-short2:  var(--transition-fast);    /* 120ms ≈ 100ms */
  --md-sys-motion-duration-short4:  var(--transition-base);    /* 200ms 完全對齊 */
  --md-sys-motion-duration-medium2: var(--transition-slow);    /* 300ms 完全對齊 */

  /* ── M3 Spacing（非 m3 標準，MUI theme.spacing(N) = N × 8）─── */
  /* MUI theme spacing 慣例：spacing(1)=8px、spacing(2)=16px、spacing(3)=24px、spacing(4)=32px
   * 本範本 0.5x baseline（4px 粒度）對齊 MUI 命名（值相同）：
   *   sp-half (4) / sp-1 (8) / sp-2 (16) / sp-3 (24) / sp-4 (32) */
  --md-sys-spacing-half: var(--spacing-1);   /*  4px */
  --md-sys-spacing-1:    var(--spacing-2);   /*  8px = MUI theme.spacing(1) */
  --md-sys-spacing-2:    var(--spacing-4);   /* 16px = MUI theme.spacing(2) */
  --md-sys-spacing-3:    var(--spacing-6);   /* 24px = MUI theme.spacing(3) */
  --md-sys-spacing-4:    var(--spacing-8);   /* 32px = MUI theme.spacing(4) */

}

/**
 * Dark mode：Jubo Care 設計規範明確不支援深色模式（README 註明）
 * 若未來要擴充，於此處覆蓋語義 token 即可。
 *
 * @media (prefers-color-scheme: dark) {
 *   :root { ... }
 * }
 */