/* Vinci LnT 設計變數（設計憲法第 7–12 節）
 * 三層：參考層 --ref-*（實際數值）→ 系統層 --color-* --text-* --space-* --radius-* --dur-*（用途）→ 元件層 --btn-* --card-* --nav-* --icon-*（尺寸）。
 * 元件只讀系統層和元件層，不直接寫色值；受眾主題、高對比只覆寫系統層和元件層。
 * 產品只做淺色（憲法第 14.5 節）。 */

:root {
  color-scheme: light;

  /* ---------- 參考層 ---------- */
  --ref-indigo: #402FFA;
  --ref-blue: #4382E9;
  --ref-sky: #46C2FF;
  --ref-lavender: #DBCDFF;
  --ref-navy: #334669;
  --ref-mist: #8FBADF;
  --ref-ink: #1E2A44;
  --ref-white: #FFFFFF;
  --ref-gray-50: #F7F8FB;
  --ref-gray-100: #EEF1F6;
  --ref-gray-200: #E6EAF2;
  --ref-gray-400: #A3ADC2;
  --ref-gray-500: #7D869B;
  --ref-gray-600: #5E6C86;
  --ref-gray-700: #4A5874;
  --ref-indigo-50: #EFEDFF;
  --ref-ai-gradient: linear-gradient(120deg, #402FFA, #4382E9 45%, #46C2FF 78%, #DBCDFF);
  --ref-ai-text-gradient: linear-gradient(90deg, #402FFA, #4382E9 55%, #2FA6E8);

  /* ---------- 系統層：中性色（第 7.2 節） ---------- */
  --color-bg: var(--ref-gray-50);
  --color-surface: var(--ref-white);
  --color-surface-elevated: var(--ref-white);
  --color-surface-2: var(--ref-gray-100);
  --color-nav: rgba(255, 255, 255, .78);
  --color-line: var(--ref-gray-200);
  --color-line-strong: var(--ref-gray-500);
  --color-text-strong: var(--ref-ink);
  --color-text: var(--ref-navy);
  --color-text-secondary: var(--ref-gray-600);
  --color-text-disabled: var(--ref-gray-400);
  --color-scrim: rgba(30, 42, 68, .32);
  --color-toast: var(--ref-ink);
  --color-on-toast: var(--ref-white);

  /* 強調色（第 7.3 節）：只給可以按或選中的東西 */
  --color-accent: var(--ref-indigo);
  --color-accent-hover: #3626E6;
  --color-on-accent: var(--ref-white);
  --color-accent-text: var(--ref-indigo);
  --color-accent-tint: var(--ref-indigo-50);
  --color-focus: var(--ref-indigo);

  /* 功能色（第 7.4 節）：淡底 / 圖示 / 文字，一律配圖示和文字 */
  --color-success-tint: #E2F9E6; --color-success-icon: #1B9247; --color-success-text: #067132;
  --color-warning-tint: #FEEFDB; --color-warning-icon: #A46E01; --color-warning-text: #7E5403;
  --color-danger-tint: #FFEDEB;  --color-danger-icon: #C34F4B;  --color-danger-text: #9A3936;
  --color-info-tint: #EAF3FF;    --color-info-icon: #337BD0;    --color-info-text: #215DA5;

  /* 科目色（第 7.5 節）：底 / 底二 / 條 / 圖示 / 字 */
  --subject-chinese-bg: #FEE9E9; --subject-chinese-bg2: #FFF0EA; --subject-chinese-bar: #FCBFC0; --subject-chinese-icon: #CA545D; --subject-chinese-text: #A03E46;
  --subject-english-bg: #D4F9E7; --subject-english-bg2: #DEFAF9; --subject-english-bar: #A6E0C6; --subject-english-icon: #01976D; --subject-english-text: #047554;
  --subject-maths-bg: #E6EFFF;   --subject-maths-bg2: #F3F2FE;   --subject-maths-bar: #B9D2FF;   --subject-maths-icon: #4C7DD9;   --subject-maths-text: #3860AC;
  --subject-science-bg: #FFEBD6; --subject-science-bg2: #F9F4DD; --subject-science-bar: #F0C9A0; --subject-science-icon: #B26F06; --subject-science-text: #8B5505;
  --subject-putonghua-bg: #F1EBFE; --subject-putonghua-bg2: #FEEDFD; --subject-putonghua-bar: #D8C7F9; --subject-putonghua-icon: #8F68CB; --subject-putonghua-text: #6F4FA1;
  --subject-coding-bg: #DCF3FF;  --subject-coding-bg2: #EDF4FF;  --subject-coding-bar: #A2DAF6;  --subject-coding-icon: #088CB9;  --subject-coding-text: #066D90;
  --subject-other-bg: var(--color-surface-2); --subject-other-bg2: var(--color-surface-2); --subject-other-bar: var(--color-line); --subject-other-icon: var(--color-text-secondary); --subject-other-text: var(--color-text-secondary);

  /* 數據圖表（第 7.6 節）：不用靛藍、不用 AI 漸變 */
  --color-data: var(--ref-blue);
  --color-data-strong: var(--ref-navy);
  --color-data-compare: var(--ref-mist);
  --color-data-track: var(--color-surface-2);

  /* AI（第 11 節）：漸變只代表 AI */
  --color-ai-gradient: var(--ref-ai-gradient);
  --color-ai-text-gradient: var(--ref-ai-text-gradient);
  --ai-border-width: 1.5px;

  /* ---------- 字體（第 8 節） ---------- */
  --font-sans: "Figtree", "Noto Sans HK", "Noto Sans TC", system-ui, sans-serif;
  /* 字級：字號 / 行高 / 字重（老師；受眾主題覆寫） */
  --text-display-size: 32px; --text-display-line: 1.2;  --text-display-weight: 700;
  --text-title-size: 22px;   --text-title-line: 1.35;   --text-title-weight: 700;
  --text-heading-size: 17px; --text-heading-line: 1.4;  --text-heading-weight: 600;
  --text-body-size: 14px;    --text-body-line: 1.7;     --text-body-weight: 400;
  --text-small-size: 13px;   --text-small-line: 1.55;   --text-small-weight: 500;
  --text-caption-size: 12px; --text-caption-line: 1.5;  --text-caption-weight: 500;
  --text-number-xl-size: 44px; --text-number-xl-line: 1.1; --text-number-xl-weight: 600;
  --text-number-l-size: 28px;  --text-number-l-line: 1.15; --text-number-l-weight: 600;
  --text-button-size: 14px;  --text-button-line: 1.2;   --text-button-weight: 600;

  /* ---------- 間距、圓角、層次（第 9 節） ---------- */
  --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(30, 42, 68, .04), 0 6px 20px rgba(30, 42, 68, .06);
  --shadow-2: 0 8px 28px rgba(30, 42, 68, .12);
  --shadow-3: 0 24px 64px rgba(30, 42, 68, .18);
  --nav-blur: saturate(180%) blur(20px);

  /* ---------- 動效（第 12 節） ---------- */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- 元件層（老師；受眾主題覆寫） ---------- */
  --btn-height: 40px; --btn-height-compact: 32px; --btn-height-primary: 40px;
  --btn-radius: var(--radius-sm); --btn-pad-x: 16px;
  --input-height: var(--btn-height); --input-radius: var(--btn-radius);
  --card-radius: var(--radius-lg); --card-pad: 20px; --card-gap: 16px;
  --card-border: 1px solid var(--color-line); --card-shadow: none;
  --nav-width: 248px; --nav-width-collapsed: 72px; --nav-item-height: 38px;
  --target-min: 32px; --target-gap: 8px;
  --progress-height: 4px;
  --tag-height: 24px;
  /* 圖示：以 24 畫布計的 stroke-width，視覺線條按受眾固定（第 10.2 節） */
  --icon-size-inline: 16px; --icon-size-nav: 20px; --icon-size-tile: 20px; --icon-size-tab: 24px;
  --icon-stroke: 2;              /* 一般（20px 約 1.6px 視覺） */
  --icon-stroke-inline: 2.4;     /* 16px 與文字同行 */
  --icon-stroke-nav: 1.9;        /* 20px 側欄、列表 */
  --icon-tile-size: 40px; --icon-tile-radius: 12px;
  --leaf-radius-small: 10%; --leaf-radius-large: 45%;
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
  --page-pad: 40px; --page-max: 1200px; --reading-max: 720px;
}

/* ---------- 受眾主題（第 6.3 節）：<html data-audience> ---------- */
:root[data-audience="secondary"] {
  --text-display-size: 28px;
  --text-title-size: 20px;
  --text-body-size: 16px;
  --text-number-xl-size: 40px;
  --text-number-l-size: 24px;
  --text-button-size: 16px;
  --btn-height: 44px; --btn-height-primary: 48px; --btn-radius: var(--radius-md); --btn-pad-x: 18px;
  --card-radius: var(--radius-xl);
  --target-min: 44px; --target-gap: 12px;
  --progress-height: 6px;
  --icon-size-nav: 22px; --icon-stroke-inline: 2.6; --icon-stroke-nav: 2; --icon-stroke: 2;
  --page-pad: 20px;
}
@media (min-width: 1024px) {
  :root[data-audience="secondary"] { --text-display-size: 32px; --text-body-size: 15px; --page-pad: 40px; }
}
:root[data-audience="primary-upper"] {
  --text-display-size: 30px; --text-display-weight: 700;
  --text-title-size: 22px;
  --text-heading-size: 18px; --text-heading-weight: 700;
  --text-body-size: 16px;
  --text-small-size: 15px; --text-small-line: 1.5;
  --text-caption-size: 14px;
  --text-number-xl-size: 40px; --text-number-xl-weight: 700;
  --text-number-l-size: 26px; --text-number-l-weight: 700;
  --text-button-size: 16px; --text-button-weight: 700;
  --btn-height: 52px; --btn-height-primary: 52px; --btn-radius: var(--radius-lg); --btn-pad-x: 20px;
  --card-radius: var(--radius-2xl); --card-pad: 24px; --card-gap: 20px;
  --card-border: 0; --card-shadow: var(--shadow-1);
  --target-min: 52px; --target-gap: 16px;
  --progress-height: 8px;
  --icon-size-inline: 20px; --icon-stroke-inline: 2.6; --icon-stroke: 2.2;
  --icon-tile-size: 60px; --icon-tile-radius: 19px;
}
:root[data-audience="primary-lower"] {
  --text-display-size: 34px; --text-display-weight: 700;
  --text-title-size: 24px;
  --text-heading-size: 21px; --text-heading-weight: 700;
  --text-body-size: 19px;
  --text-small-size: 17px; --text-small-line: 1.5;
  --text-caption-size: 16px; --text-caption-weight: 600;
  --text-number-xl-size: 44px; --text-number-xl-weight: 700;
  --text-number-l-size: 30px; --text-number-l-weight: 700;
  --text-button-size: 19px; --text-button-weight: 700;
  --btn-height: 60px; --btn-height-primary: 72px; --btn-radius: var(--radius-xl); --btn-pad-x: 24px;
  --card-radius: var(--radius-2xl); --card-pad: 24px; --card-gap: 20px;
  --card-border: 0; --card-shadow: var(--shadow-1);
  --target-min: 60px; --target-gap: 16px;
  --progress-height: 8px;
  --icon-size-inline: 20px; --icon-stroke-inline: 2.6; --icon-stroke: 2.2;
  --icon-tile-size: 72px; --icon-tile-radius: 22px;
}

/* ---------- 高對比（第 14.4 節）：系統設定或無障礙面板的「高對比」 ---------- */
@media (prefers-contrast: more) {
  :root {
    --color-text-secondary: var(--ref-gray-700);
    --color-line: var(--color-line-strong);
    --ai-border-width: 2px;
    --subject-chinese-icon: var(--subject-chinese-text); --subject-english-icon: var(--subject-english-text);
    --subject-maths-icon: var(--subject-maths-text); --subject-science-icon: var(--subject-science-text);
    --subject-putonghua-icon: var(--subject-putonghua-text); --subject-coding-icon: var(--subject-coding-text);
  }
}
:root.a11y-contrast {
  --color-text-secondary: var(--ref-gray-700);
  --color-text: var(--ref-ink);
  --color-line: var(--color-line-strong);
  --ai-border-width: 2px;
  --subject-chinese-icon: var(--subject-chinese-text); --subject-english-icon: var(--subject-english-text);
  --subject-maths-icon: var(--subject-maths-text); --subject-science-icon: var(--subject-science-text);
  --subject-putonghua-icon: var(--subject-putonghua-text); --subject-coding-icon: var(--subject-coding-text);
}

/* 減少透明度：導航物料改實色（第 9.4 節） */
@media (prefers-reduced-transparency: reduce) {
  :root { --color-nav: var(--color-surface); --nav-blur: none; }
}

/* ---------- 舊變數對照（過渡期，第 16 節步驟 3 清除） ----------
 * 現有頁面和 JS 內聯樣式約有 4,000 處用舊變數名。這裏把舊名接到系統層，
 * 令舊畫面即時換上新色板而不倒退；新程式碼一律用系統層變數，不再用以下名稱。 */
:root {
  --brand-indigo: var(--ref-indigo); --brand-sky: var(--ref-sky); --brand-lavender: var(--ref-lavender);
  --brand-navy: var(--ref-navy); --brand-blue: var(--ref-blue); --brand-mist: var(--ref-mist);
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-line);
  --text: var(--color-text);
  --heading: var(--color-text-strong);
  --muted: var(--color-text-secondary);
  --faint: var(--color-text-secondary);
  --teal: var(--color-accent-text);
  --green: var(--color-success-icon);
  --amber: var(--color-warning-icon);
  --rose: var(--color-danger-icon);
  --danger: var(--color-danger-icon);
  --violet: var(--color-text-secondary);
  --accent: var(--color-accent);
  /* 一般按鈕改為實色靛藍；漸變只留給 AI（第 16 節對照） */
  --accent-grad: var(--color-accent);
  --hero-grad: linear-gradient(120deg, #e3f3fe 0%, #eef0fd 55%, #f1eafd 100%);
  --shadow: var(--shadow-1);
  --radius: var(--radius-lg);
  --sans: var(--font-sans);
}