/* =============================================================================
   PMIS Design Tokens  (v1.0 - 2026 中秋禮盒配色)
   -----------------------------------------------------------------------------
   來源：周所2024年中秋禮盒折頁主視覺
   主色：深蜜紫 / 帆影藍 / 初夏綠 / 西班牙白 / 悠閒灰綠 / 岩板灰

   檔案匯入順序建議（在 App.razor 或 _Host.cshtml）:
     1. Radzen 主題 (material3-base.css)
     2. site.css
     3. pmis-design-tokens.css   ← 本檔，覆寫 Radzen 變數
     4. pmis-components.css      ← 元件樣式

   一律使用 var(--pmis-*) 而非寫死色碼，避免日後改色要全文搜尋。
   ============================================================================= */

:root {
    /* ───────── 品牌主色（5 色 + 岩板灰）───────── */
    --pmis-purple: #5C4261;            /* 深蜜紫 - 品牌主色 */
    --pmis-blue: #A2C4E4;              /* 帆影藍 - 資訊／檢視 */
    --pmis-green: #97C18A;             /* 初夏綠 - 成功／通過 */
    --pmis-cream: #DED1B7;             /* 西班牙白 - 提示／中性背景 */
    --pmis-teal: #496569;              /* 悠閒灰綠 - 次要操作／文字 */
    --pmis-stone: #C5C1BD;             /* 岩板灰 - 邊框／停用 */

    /* ───────── 深蜜紫色階 ───────── */
    --pmis-purple-50: #E9E5E9;
    --pmis-purple-100: #E4DFE4;
    --pmis-purple-200: #DDD7DD;
    --pmis-purple-300: #D5CDD5;
    --pmis-purple-400: #CAC1C8;
    --pmis-purple-500: #BDB1BE;
    --pmis-purple-600: #AC9EAE;
    --pmis-purple-700: #97869A;
    --pmis-purple-800: #7D6881;
    --pmis-purple-900: #5C4261;        /* = --pmis-purple */
    --pmis-purple-950: #42313F;
    --pmis-purple-darkest: #1F141E;

    /* ───────── 帆影藍色階 ───────── */
    --pmis-blue-50: #E9E5E9;
    --pmis-blue-100: #E4DFE4;
    --pmis-blue-200: #DDD7DD;
    --pmis-blue-300: #D5CDD5;
    --pmis-blue-400: #C0BCC8;
    --pmis-blue-500: #A2C4E4;          /* = --pmis-blue */
    --pmis-blue-600: #829DB6;
    --pmis-blue-700: #687E92;
    --pmis-blue-800: #536575;
    --pmis-blue-900: #42515E;
    --pmis-blue-950: #2A343C;

    /* ───────── 初夏綠色階 ───────── */
    --pmis-green-50: #EAF2E5;
    --pmis-green-100: #DCE9D2;
    --pmis-green-200: #C9DCBB;
    --pmis-green-300: #B3CFA1;
    --pmis-green-400: #A6C896;
    --pmis-green-500: #97C18A;         /* = --pmis-green */
    --pmis-green-600: #799A6E;
    --pmis-green-700: #617B58;
    --pmis-green-800: #4E6246;
    --pmis-green-900: #3E4E38;
    --pmis-green-950: #283224;

    /* ───────── 西班牙白色階 ───────── */
    --pmis-cream-50: #F6F2EB;
    --pmis-cream-100: #EFE7D6;
    --pmis-cream-200: #E6D9C0;
    --pmis-cream-300: #DED1B7;         /* = --pmis-cream */
    --pmis-cream-400: #B2A792;
    --pmis-cream-500: #8E8675;
    --pmis-cream-600: #726B5E;
    --pmis-cream-700: #5B564B;
    --pmis-cream-800: #49453C;
    --pmis-cream-900: #3A3730;
    --pmis-cream-950: #25231E;

    /* ───────── 悠閒灰綠色階 ───────── */
    --pmis-teal-50: #E9EEEF;
    --pmis-teal-100: #D9E0E1;
    --pmis-teal-200: #C3CFD0;
    --pmis-teal-300: #A1B1B2;
    --pmis-teal-400: #8A9D9F;
    --pmis-teal-500: #6D8487;
    --pmis-teal-600: #496569;          /* = --pmis-teal */
    --pmis-teal-700: #3D5458;
    --pmis-teal-800: #324447;
    --pmis-teal-900: #283538;
    --pmis-teal-950: #1A2326;

    /* ───────── 岩板灰色階 ───────── */
    --pmis-stone-50: #F5F4F2;
    --pmis-stone-100: #EBEAE7;
    --pmis-stone-200: #DAD8D3;
    --pmis-stone-300: #C5C1BD;         /* = --pmis-stone */
    --pmis-stone-400: #A5A19C;
    --pmis-stone-500: #85827E;
    --pmis-stone-600: #6B6864;
    --pmis-stone-700: #535048;
    --pmis-stone-800: #3D3A35;
    --pmis-stone-900: #29262F;

    /* ───────── 危險色（配色票無紅色，採磚紅維持氣質）───────── */
    --pmis-danger: #8B3A3A;
    --pmis-danger-light: #B2615F;
    --pmis-danger-lighter: #F2D9D5;
    --pmis-danger-dark: #6E2C2C;

    /* ───────── 語意色彩對應（按鈕屬性 → 色彩）─────────
       Primary  = 主要操作：新增、儲存、送出、確認 → 深蜜紫
       Secondary= 次要操作：查詢、瀏覽、重整、匯出 → 悠閒灰綠
       Info     = 資訊類別：檢視、預覽、明細、變更 → 帆影藍
       Success  = 正向回饋：通過、啟用、完成、提交 → 初夏綠
       Warning  = 提醒類別：審核中、待處理、暫存 → 西班牙白色階加深
       Danger   = 危險動作：刪除、停用、駁回、撤銷 → 磚紅
       Neutral  = 中性動作：取消、返回、關閉、停用按鈕 → 岩板灰
    ============================================================ */
    --pmis-color-primary: var(--pmis-purple);
    --pmis-color-primary-hover: var(--pmis-purple-950);
    --pmis-color-primary-active: var(--pmis-purple-darkest);
    --pmis-color-on-primary: #FFFFFF;

    --pmis-color-secondary: var(--pmis-teal);
    --pmis-color-secondary-hover: var(--pmis-teal-700);
    --pmis-color-secondary-active: var(--pmis-teal-900);
    --pmis-color-on-secondary: #FFFFFF;

    --pmis-color-info: var(--pmis-blue);
    --pmis-color-info-hover: var(--pmis-blue-600);
    --pmis-color-info-active: var(--pmis-blue-800);
    --pmis-color-on-info: var(--pmis-blue-950);

    --pmis-color-success: var(--pmis-green);
    --pmis-color-success-hover: var(--pmis-green-600);
    --pmis-color-success-active: var(--pmis-green-800);
    --pmis-color-on-success: #FFFFFF;

    --pmis-color-warning: var(--pmis-cream-400);
    --pmis-color-warning-hover: var(--pmis-cream-500);
    --pmis-color-warning-active: var(--pmis-cream-700);
    --pmis-color-on-warning: var(--pmis-cream-950);

    --pmis-color-danger: var(--pmis-danger);
    --pmis-color-danger-hover: var(--pmis-danger-dark);
    --pmis-color-danger-active: #4D1F1F;
    --pmis-color-on-danger: #FFFFFF;

    --pmis-color-neutral: var(--pmis-stone);
    --pmis-color-neutral-hover: var(--pmis-stone-400);
    --pmis-color-neutral-active: var(--pmis-stone-600);
    --pmis-color-on-neutral: var(--pmis-stone-900);

    /* ───────── 表面 / 文字 ───────── */
    --pmis-surface: #FFFFFF;
    --pmis-surface-alt: var(--pmis-stone-50);
    --pmis-surface-muted: var(--pmis-cream-50);
    --pmis-surface-overlay: rgba(28, 28, 30, 0.55);

    --pmis-text-primary: #1F2123;       /* 主文字（高對比，避免紫底白字過淡）*/
    --pmis-text-secondary: var(--pmis-teal-800);
    --pmis-text-muted: var(--pmis-stone-600);
    --pmis-text-disabled: var(--pmis-stone-400);
    --pmis-text-on-dark: #FFFFFF;
    --pmis-text-link: var(--pmis-teal-700);
    --pmis-text-link-hover: var(--pmis-purple);

    --pmis-border: var(--pmis-stone-300);
    --pmis-border-strong: var(--pmis-stone-500);
    --pmis-divider: var(--pmis-stone-200);

    /* ───────── 字體 ───────── */
    --pmis-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Segoe UI", system-ui, -apple-system, sans-serif;
    --pmis-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

    /* 將原系統的 12-13px 全面放大到 14-15px 為基準（解決「字太小」回饋）*/
    /* 2026-05-26：使用者反映字體仍偏小，根字級由 16px → 18px（放大 2 級）  */
    --pmis-fs-root: 18px;               /* html 字級基準（18px ≒ 原 16px + 2 級）*/
    --pmis-fs-2xs: 0.75rem;             /* ≈13.5px - 標籤、輔助 */
    --pmis-fs-xs: 0.8125rem;            /* ≈14.6px - caption */
    --pmis-fs-sm: 0.875rem;             /* ≈15.8px - 表格內容 */
    --pmis-fs-base: 0.9375rem;          /* ≈16.9px - 內文 */
    --pmis-fs-md: 1rem;                 /* 18px    - 按鈕、輸入框 */
    --pmis-fs-lg: 1.125rem;             /* ≈20.3px - 小標 */
    --pmis-fs-xl: 1.25rem;              /* ≈22.5px */
    --pmis-fs-2xl: 1.5rem;              /* 27px    - h3 */
    --pmis-fs-3xl: 1.75rem;             /* 31.5px  - h2 */
    --pmis-fs-4xl: 2.125rem;            /* 38.3px  - h1 */

    --pmis-lh-tight: 1.25;
    --pmis-lh-snug: 1.4;
    --pmis-lh-normal: 1.55;
    --pmis-lh-loose: 1.75;

    --pmis-fw-regular: 400;
    --pmis-fw-medium: 500;
    --pmis-fw-semibold: 600;
    --pmis-fw-bold: 700;

    /* ───────── 間距（4px 基數）───────── */
    --pmis-sp-0: 0;
    --pmis-sp-1: 0.25rem;               /* 4 */
    --pmis-sp-2: 0.5rem;                /* 8 */
    --pmis-sp-3: 0.75rem;               /* 12 */
    --pmis-sp-4: 1rem;                  /* 16 */
    --pmis-sp-5: 1.25rem;               /* 20 */
    --pmis-sp-6: 1.5rem;                /* 24 */
    --pmis-sp-8: 2rem;                  /* 32 */
    --pmis-sp-10: 2.5rem;               /* 40 */
    --pmis-sp-12: 3rem;                 /* 48 */

    /* ───────── 圓角 ───────── */
    --pmis-radius-xs: 4px;
    --pmis-radius-sm: 6px;
    --pmis-radius-md: 10px;             /* 卡片預設 */
    --pmis-radius-lg: 14px;
    --pmis-radius-xl: 20px;
    --pmis-radius-pill: 999px;

    /* ───────── 陰影（柔和、低飽和）───────── */
    --pmis-shadow-xs: 0 1px 2px rgba(28, 28, 30, 0.06);
    --pmis-shadow-sm: 0 2px 6px rgba(28, 28, 30, 0.08);
    --pmis-shadow-md: 0 4px 12px rgba(28, 28, 30, 0.10);
    --pmis-shadow-lg: 0 10px 24px rgba(28, 28, 30, 0.14);
    --pmis-shadow-focus: 0 0 0 3px rgba(92, 66, 97, 0.25);

    /* ───────── 動畫 ───────── */
    --pmis-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pmis-dur-fast: 120ms;
    --pmis-dur-base: 200ms;
    --pmis-dur-slow: 320ms;

    /* ───────── 圖層 ───────── */
    --pmis-z-base: 1;
    --pmis-z-sticky: 100;
    --pmis-z-overlay: 1000;
    --pmis-z-dropdown: 1100;
    --pmis-z-modal: 1200;
    --pmis-z-toast: 1300;

    /* ─────────────────────────────────────────────────────────────
       將 Radzen Material3 的關鍵變數（--rz-*）對齊到本配色，
       讓既有 RadzenButton / RadzenCard 不需修改即套用新色。
    ───────────────────────────────────────────────────────────── */
    --rz-primary: var(--pmis-color-primary);
    --rz-primary-light: var(--pmis-purple-300);
    --rz-primary-lighter: rgba(92, 66, 97, 0.13);
    --rz-primary-dark: var(--pmis-color-primary-hover);
    --rz-primary-darker: var(--pmis-color-primary-active);
    --rz-on-primary: #FFFFFF;

    --rz-secondary: var(--pmis-color-secondary);
    --rz-secondary-light: var(--pmis-teal-300);
    --rz-secondary-lighter: rgba(73, 101, 105, 0.13);
    --rz-secondary-dark: var(--pmis-color-secondary-hover);
    --rz-secondary-darker: var(--pmis-color-secondary-active);
    --rz-on-secondary: #FFFFFF;

    --rz-info: var(--pmis-color-info);
    --rz-info-light: var(--pmis-blue-300);
    --rz-info-lighter: rgba(162, 196, 228, 0.30);
    --rz-info-dark: var(--pmis-color-info-hover);
    --rz-info-darker: var(--pmis-color-info-active);
    --rz-on-info: var(--pmis-blue-950);

    --rz-success: var(--pmis-color-success);
    --rz-success-light: var(--pmis-green-200);
    --rz-success-lighter: rgba(151, 193, 138, 0.20);
    --rz-success-dark: var(--pmis-color-success-hover);
    --rz-success-darker: var(--pmis-color-success-active);
    --rz-on-success: #FFFFFF;

    --rz-warning: var(--pmis-color-warning);
    --rz-warning-light: var(--pmis-cream-200);
    --rz-warning-lighter: rgba(222, 209, 183, 0.40);
    --rz-warning-dark: var(--pmis-color-warning-hover);
    --rz-warning-darker: var(--pmis-color-warning-active);
    --rz-on-warning: var(--pmis-cream-950);

    --rz-danger: var(--pmis-color-danger);
    --rz-danger-light: var(--pmis-danger-lighter);
    --rz-danger-lighter: rgba(139, 58, 58, 0.13);
    --rz-danger-dark: var(--pmis-color-danger-hover);
    --rz-danger-darker: var(--pmis-color-danger-active);
    --rz-on-danger: #FFFFFF;

    --rz-base: var(--pmis-stone-100);
    --rz-base-50: var(--pmis-stone-50);
    --rz-base-100: var(--pmis-stone-100);
    --rz-base-200: var(--pmis-stone-200);
    --rz-base-300: var(--pmis-stone-300);
    --rz-base-light: #FFFFFF;
    --rz-base-lighter: #FFFFFF;
    --rz-base-dark: var(--pmis-stone-700);
    --rz-base-darker: var(--pmis-stone-900);

    --rz-text-color: var(--pmis-text-primary);
    --rz-text-secondary-color: var(--pmis-text-secondary);
    --rz-text-tertiary-color: var(--pmis-text-muted);
    --rz-text-disabled-color: var(--pmis-text-disabled);

    --rz-link-color: var(--pmis-text-link);
    --rz-link-hover-color: var(--pmis-text-link-hover);

    --rz-body-background-color: var(--pmis-surface-alt);
    --rz-body-font-size: var(--pmis-fs-base);
    --rz-body-line-height: var(--pmis-lh-normal);
    --rz-text-font-family: var(--pmis-font-sans);
    --rz-root-font-size: var(--pmis-fs-root);

    --rz-panel-menu-item-color: var(--pmis-text-primary);
    --rz-panel-menu-item-hover-color: var(--pmis-color-primary);
}

/* 暗色模式（自動套用） — 預留：保留紫色作為強調色 */
@media (prefers-color-scheme: dark) {
    :root.pmis-auto-dark {
        --pmis-surface: #1B1820;
        --pmis-surface-alt: #221E27;
        --pmis-surface-muted: #2A2530;
        --pmis-text-primary: #F1EEF3;
        --pmis-text-secondary: var(--pmis-cream-200);
        --pmis-text-muted: var(--pmis-stone-400);
        --pmis-border: var(--pmis-stone-700);
        --pmis-divider: var(--pmis-stone-800);
    }
}