/* ============================================================
   tokens.css — 跳動 e 投放 design tokens v0.2「俏皮翻轉版」
   家族繼承：母品牌 #FFC709 鮮黃 + #1736F5 電光藍
   用法翻轉：母品牌克制（黃 1% 點睛）→ 子品牌大膽（黃當主色）
   氣質：Mailchimp / Notion / Canva 系，friendly playful tool
   ============================================================ */

:root {
    /* ─── 色彩｜亮米底 + 鮮黃主場 ─── */
    --c-cream:        #FFFBF0;   /* 奶油白 — 主底 */
    --c-cream-soft:   #FFF5DD;   /* 暖白 — surface */
    --c-cream-deep:   #FFEDC4;   /* 米黃 — hover / 浮層 */

    --c-yellow:       #FFC709;   /* 母品牌鮮黃 — 主品牌色 */
    --c-yellow-deep:  #F5A623;   /* 深琥珀 — 主色 hover */
    --c-yellow-soft:  #FFE48A;   /* 淡黃 — badge 底 */

    --c-blue:         #1736F5;   /* 母品牌電光藍 — accent / CTA hover */
    --c-blue-soft:    #DCE3FF;   /* 淡藍 — badge 底 */

    --c-pink:         #FF5778;   /* 桃紅 — 第二 accent / 強調 */
    --c-pink-soft:    #FFE0E7;

    --c-mint:         #2DD4BF;   /* 薄荷 — 成功 / 互動 */
    --c-mint-soft:    #CCFBF1;

    --c-ink:          #0F1632;   /* 深墨（不是純黑、帶藏青）— 主文字 */
    --c-ink-soft:     #4A5568;   /* 中墨 — 次文字 */
    --c-ink-muted:    #8893A8;   /* 淡墨 — 註腳 */
    --c-ink-disabled: #C5CBD9;   /* 禁用 */

    /* RGB（rgba 用）*/
    --c-yellow-rgb: 255, 199, 9;
    --c-blue-rgb:   23, 54, 245;
    --c-pink-rgb:   255, 87, 120;
    --c-ink-rgb:    15, 22, 50;
    --c-mint-rgb:   45, 212, 191;

    /* ─── 表面層級 ─── */
    --bg-base:     var(--c-cream);
    --bg-surface:  #FFFFFF;
    --bg-elevated: var(--c-cream-soft);
    --bg-input:    #FFFFFF;

    /* ─── 文字 ─── */
    --text-primary:   var(--c-ink);
    --text-secondary: var(--c-ink-soft);
    --text-tertiary:  var(--c-ink-muted);
    --text-on-yellow: var(--c-ink);
    --text-on-blue:   #FFFFFF;
    --text-on-pink:   #FFFFFF;

    /* ─── 邊框｜全部走深墨細邊（neo-brutalism 系特色）─── */
    --border-base:   rgba(15, 22, 50, 0.10);
    --border-strong: rgba(15, 22, 50, 0.18);
    --border-ink:    var(--c-ink);    /* 主強邊：純深墨 1.5px */
    --border-focus:  var(--c-yellow);

    /* ─── 語意色 ─── */
    --success:    var(--c-mint);
    --success-bg: var(--c-mint-soft);
    --warning:    var(--c-yellow-deep);
    --warning-bg: var(--c-yellow-soft);
    --danger:     var(--c-pink);
    --danger-bg:  var(--c-pink-soft);
    --info:       var(--c-blue);
    --info-bg:    var(--c-blue-soft);

    /* ─── 字型｜中文 Noto + 英文 Plus Jakarta Sans（圓潤現代）─── */
    --f-sans-en: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --f-sans-tc: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    --f-sans:    var(--f-sans-tc), var(--f-sans-en);
    --f-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* ─── 字級 ─── */
    --fs-xs:   0.75rem;     /* 12px */
    --fs-sm:   0.875rem;    /* 14px */
    --fs-base: 1rem;        /* 16px */
    --fs-md:   1.125rem;    /* 18px */
    --fs-lg:   1.375rem;    /* 22px */
    --fs-xl:   1.75rem;     /* 28px */
    --fs-2xl:  2.25rem;     /* 36px */
    --fs-3xl:  3rem;        /* 48px */
    --fs-4xl:  4rem;        /* 64px */

    /* ─── 字重 ─── */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extra:    800;

    /* ─── Line height ─── */
    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-normal: 1.6;
    --lh-loose:  1.8;

    /* ─── 間距 ─── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* ─── 圓角｜俏皮大圓角 ─── */
    --radius-sm:   8px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-2xl:  36px;
    --radius-pill: 999px;

    /* ─── 陰影｜hard offset shadow + soft shadow 兩套 ─── */
    --shadow-pop-sm: 3px 3px 0 var(--c-ink);             /* 小卡片 hard shadow */
    --shadow-pop:    4px 4px 0 var(--c-ink);             /* 卡片 / 按鈕 hard shadow */
    --shadow-pop-lg: 6px 6px 0 var(--c-ink);             /* 主 CTA hard shadow */
    --shadow-soft:   0 4px 14px rgba(15, 22, 50, 0.06);  /* 輔助柔軟陰影 */
    --shadow-soft-md:0 12px 30px rgba(15, 22, 50, 0.10);

    --shadow-glow-yellow: 0 0 0 4px rgba(var(--c-yellow-rgb), 0.40);
    --shadow-glow-blue:   0 0 0 4px rgba(23, 54, 245, 0.25);
    --shadow-glow-pink:   0 0 0 4px rgba(255, 87, 120, 0.30);

    /* ─── 過渡｜帶 spring 彈跳感 ─── */
    --t-fast:   180ms cubic-bezier(0.34, 1.56, 0.64, 1);   /* 微彈跳 */
    --t-base:   250ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-slow:   400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-linear: 200ms ease-out;

    /* ─── Layout ─── */
    /* 內容寬度語意層級（topbar/footer 固定吃 --max-w-content）：
       content 1200 = 應用/儀表頁（投放・我的廣告・影片庫）
       medium  960  = 功能/表單頁（儲值・推薦中心）
       read    880  = 帳號/卡片頁（我的資料：profile-card 三欄網格需 ~780px 寬）
       prose   640  = 長文閱讀（條款・隱私・政策・教學）：CJK 全形字每行 ≤40-45 字
                      才好讀（中文舒適行長約英文一半）、640÷14px≈42 字落在區間內
       form    480  = 緊湊表單卡（登入等） */
    --max-w-content: 1200px;
    --max-w-medium:  960px;
    --max-w-read:    880px;
    --max-w-prose:   640px;
    --max-w-form:    480px;
    --sec-px:        1.5rem;
    --nav-h:         72px;

    /* ─── Z-index ─── */
    --z-base:     1;
    --z-sticky:   10;
    --z-nav:      100;
    --z-dropdown: 200;
    --z-modal:    1000;
    --z-toast:    2000;
}

/* ============================================================
   Dark Mode｜深空夜間版
   家族對應母品牌 c-black (#050d2e)，子品牌深一階接近工具站氛圍
   策略：一般元件用 subtle shadow（耐看），狀態指示保留 hard shadow（招牌 DNA）
   ============================================================ */

[data-theme="dark"] {
    /* ─── 表面層級 ─── */
    --bg-base:     #0A0F1F;
    --bg-surface:  #131A33;
    --bg-elevated: #1C2444;
    --bg-input:    #0F162D;

    /* ─── Cream 系反向（dark 環境下，cream 變成深色表面別名）─── */
    --c-cream:        #0A0F1F;
    --c-cream-soft:   #131A33;
    --c-cream-deep:   #1C2444;

    /* ─── 文字 ─── */
    --text-primary:   #F0F2F8;
    --text-secondary: rgba(240, 242, 248, 0.65);
    --text-tertiary:  rgba(240, 242, 248, 0.55);   /* 0.40→0.55：0.40 僅 3.4-3.5:1 未達 AA 4.5；0.55 在 elevated/surface/base 三面皆 ≥5:1、仍低於 secondary 0.65 維持層級 */
    --text-disabled:  rgba(240, 242, 248, 0.20);
    --text-on-yellow: #0F1632;
    --text-on-blue:   #FFFFFF;
    --text-on-pink:   #FFFFFF;

    /* ─── 主品牌色｜Dark 模式語意翻轉
       「黃當 primary」→「冷光藍當 primary」（呼應母品牌 88/8/3/1 規則的 3% hover 色升為主場）
       --c-yellow 變數名保留（避免大量 refactor），實質值翻為冷光藍
       警告色用獨立的 --warning，不受影響
       ─── */
    --c-yellow:       #00c8ff;          /* 主品牌色（在 dark 翻為冷光藍）*/
    --c-yellow-deep:  #00a8d8;
    --c-yellow-soft:  rgba(0, 200, 255, 0.16);

    --c-blue:         #5B7BFF;          /* 原 1736F5 在深底太深、略亮 */
    --c-blue-soft:    rgba(91, 123, 255, 0.18);

    --c-pink:         #FF6B89;          /* 略降飽和、避免「閃」*/
    --c-pink-soft:    rgba(255, 107, 137, 0.18);

    --c-mint:         #3CDDC0;
    --c-mint-soft:    rgba(60, 221, 192, 0.18);

    /* ─── c-ink 翻轉為淡色｜所有 hard shadow / border 自動跟著變色 ─── */
    --c-ink:          #F0F2F8;

    /* ─── RGB channels（rgba 用，dark mode 重新校準）─── */
    --c-yellow-rgb: 0, 200, 255;        /* 翻為冷光藍 RGB（呼應上方 --c-yellow 翻轉）*/
    --c-blue-rgb:   91, 123, 255;
    --c-pink-rgb:   255, 107, 137;
    --c-ink-rgb:    240, 242, 248;
    --c-mint-rgb:   60, 221, 192;

    /* ─── 邊框 ─── */
    --border-base:   rgba(240, 242, 248, 0.08);
    --border-strong: rgba(240, 242, 248, 0.18);

    /* ─── 語意色（dark 校準）─── */
    --success-bg: rgba(60, 221, 192, 0.14);
    --warning:    #FFB938;
    --warning-bg: rgba(255, 185, 56, 0.14);
    --danger-bg:  rgba(255, 107, 137, 0.14);
    --info-bg:    rgba(91, 123, 255, 0.14);

    /* ─── Shadow｜一般元件改 subtle（depth 感、不是硬陰影）─── */
    --shadow-pop-sm: 0 1px 0 rgba(240, 242, 248, 0.06) inset, 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-pop:    0 1px 0 rgba(240, 242, 248, 0.08) inset, 0 8px 20px rgba(0, 0, 0, 0.50);
    --shadow-pop-lg: 0 1px 0 rgba(240, 242, 248, 0.10) inset, 0 14px 32px rgba(0, 0, 0, 0.60);

    /* ─── glow（dark 校準）─── */
    --shadow-glow-yellow: 0 0 0 4px rgba(var(--c-yellow-rgb), 0.32);  /* 冷光藍 glow（變數已翻轉）*/
    --shadow-glow-blue:   0 0 0 4px rgba(91, 123, 255, 0.30);
    --shadow-glow-pink:   0 0 0 4px rgba(255, 107, 137, 0.32);
}