/* 阿橘+1 設計語言 — Design Tokens */
:root {
    /* ===== 品牌色 ===== */
    --color-primary: #FF8A00;
    --color-primary-dark: #FF6B00;
    --color-primary-light: #FFF3E0;
    --color-primary-bg: #FFF8F0;
    --gradient-header: linear-gradient(135deg, #FF8A00, #FFB74D);

    /* ===== 文字色 ===== */
    --color-text-primary: #4A3728;
    --color-text-secondary: #8B7355;
    --color-text-tertiary: #B0A090;
    --color-text-inverse: #FFFFFF;

    /* ===== 背景色 ===== */
    --color-bg-page: #F8F4EE;
    --color-bg-card: #FFFFFF;
    --color-bg-hover: #FFF8F0;

    /* ===== 邊框色 ===== */
    --color-border: #EDE5D8;
    --color-border-light: #F5F0EA;
    --color-divider: #F5F0EA;

    /* ===== 語義色 ===== */
    --color-success: #4CAF50;
    --color-error: #DC503C;
    --color-warning: #FF9800;
    --color-info: #2196F3;

    /* ===== 圓角 ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 50px;

    /* ===== 陰影 ===== */
    --shadow-sm: 0 1px 4px rgba(74,55,40,0.06);
    --shadow-md: 0 2px 8px rgba(74,55,40,0.08);
    --shadow-lg: 0 4px 16px rgba(74,55,40,0.12);

    /* ===== 09A-P2 擴充（新增，不改既有值；既有頁面渲染不受影響）=====
     * 依 09A-001 已核准的 02_design_system.md。
     * 舊 token 的值刻意保留原狀 —— 換掉它們等於一次改動全部 22 頁，
     * 那是另一個批次的事。本輪只新增，並在 P2 的頁面使用新 token。
     */

    /* 動作色：品牌橘 #FF8A00 對白字只有 2.36:1，不能承載白色內文字。
     * 識別仍用品牌橘（填色／外框／圖示），承載文字的表面改用深橘。 */
    --color-action: #C43E00;            /* 主按鈕底，白字 5.20:1 */
    --color-action-hover: #A33300;
    --color-action-text: #B34000;       /* 白底上的橘色文字 5.75:1 */

    /* 文字：補上長內文與「非必讀」層級（--color-text-tertiary 退役，不得用於必讀文字） */
    /* TEMPORARY COMPATIBILITY TOKEN（09A-P2）：
       既有 --color-text-secondary #8B7355 只有 4.49:1，14px 必讀文字不達標，
       但它被其他頁面共用、本輪不得改值，因此另開這個 6.77:1 的色階。
       全站色階整併時應與 --color-text-secondary 合併。 */
    --color-text-soft: #6B5842;         /* 6.77:1 — 14px 必讀文字用 */
    --color-text-strong: #2D2D2D;       /* 13.77:1 標題墨色 */

    /* 表面與邊框 */
    --color-bg-sunken: #FAF7F1;         /* 凹面：logo 容器、輸入框 */
    --color-border-strong: #DDD2BF;

    /* 語意色：前景／底色成對，前景一律 >= 4.9:1（不做彩底白字徽章） */
    --color-success-fg: #3F6F10;  --color-success-surface: #EEF6E3;
    --color-error-fg:   #C0392B;  --color-error-surface:   #FDECEA;
    --color-warning-fg: #8A5300;  --color-warning-surface: #FFF3E0;
    --color-info-fg:    #1565C0;  --color-info-surface:    #E8F1FB;

    /* 字級：必讀文字下限 14px，輸入框 16px */
    --font-size-title: 20px;
    --font-size-lg: 18px;
    --font-size-body: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 13px;               /* 僅限徽章，且不得是唯一資訊來源 */
    --line-height-tight: 1.3;
    --line-height-body: 1.6;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* 間距：4 的倍數 */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px;

    /* 控制項 */
    --control-height: 48px;
    --control-height-sm: 44px;
    --tap-min: 44px;
    /* 09A-P13：全站鍵盤焦點 —— 實色、白底對比 ≥3:1（action-text #B34000 約 5.7:1）。舊值是 35% 透明橘（約 1.5:1，不夠）。 */
    --focus-color: var(--color-action-text);
    --focus-width: 3px;
    --focus-ring: 0 0 0 2px var(--color-bg-card, #fff), 0 0 0 calc(2px + var(--focus-width)) var(--focus-color);   /* 先 2px 白縫再實色圈：實心橘按鈕上也看得出焦點 */

    /* 品牌資產容器 */
    --logo-box: 80px;
    --logo-box-sm: 56px;

    /* 安全區 */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}