/* ==========================================================================
   tokens.css — 設計 token（色票、質感、字級、間距）
   全站純黑白：沒有任何彩色，層次靠明度、對比與留白拉開。
   要調整外觀請只動這支；其他 css 一律用 var()。
   ========================================================================== */

:root {
    /* --- 字體 --- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK TC", monospace;

    /* --- 字級 --- */
    --fs-hero: clamp(2.75rem, 6vw, 4.25rem);
    --fs-h1: clamp(2rem, 4vw, 2.75rem);
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;
    --fs-code: 0.8125rem;

    --lh-body: 1.85;
    --lh-tight: 1.15;

    /* --- 間距 --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 72px;
    --sp-9: 112px;

    /* --- 圓角 --- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 999px;

    /* --- 版面 --- */
    --h-header: 64px;
    --w-sidebar: 272px;
    --w-content: 720px;
    --w-codepanel: 440px;
    --w-toc: 220px;

    --z-backdrop: 0;
    --z-content: 1;
    --z-sidebar: 40;
    --z-header: 50;

    /* --- 模糊強度 --- */
    --glass-blur: blur(20px) saturate(100%);
    --glass-blur-strong: blur(28px) saturate(100%);
}

/* ==========================================================================
   深色（預設）：純黑底、白字
   ========================================================================== */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #000000;
    --bg-solid: #0a0a0a;

    /* 背景光暈：單色、極淡，只用來製造深度，不帶顏色 */
    --glow-1: rgba(255, 255, 255, .055);
    --glow-2: rgba(255, 255, 255, .038);
    --glow-3: rgba(255, 255, 255, .028);
    --glow-4: rgba(255, 255, 255, .022);
    --glow-opacity: 1;
    --grain-opacity: .13;

    /* 表面 */
    --surface: rgba(255, 255, 255, .040);
    --surface-hover: rgba(255, 255, 255, .070);
    --border: rgba(255, 255, 255, .12);
    --border-strong: rgba(255, 255, 255, .26);
    --shadow: 0 8px 32px rgba(0, 0, 0, .5);
    --shadow-hover: 0 16px 48px rgba(0, 0, 0, .65);

    /* 需要高對比的表面（程式碼、彈出層、chrome） */
    --surface-deep: rgba(10, 10, 10, .72);
    --surface-chrome: rgba(0, 0, 0, .74);

    /* 文字 */
    --text: #ffffff;
    --text-muted: #a3a3a3;
    --text-subtle: #6b6b6b;
    --text-invert: #000000;

    --hairline: rgba(255, 255, 255, .10);

    /* 語法標色：不用顏色，靠明度與字重分層 */
    --syn-key: #ffffff;
    --syn-str: #c4c4c4;
    --syn-num: #c4c4c4;
    --syn-lit: #e4e4e4;
    --syn-flag: #b0b0b0;
    --syn-cmt: #5a5a5a;
}

/* ==========================================================================
   淺色：純白底、黑字
   ========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;

    --bg: #ffffff;
    --bg-solid: #ffffff;

    --glow-1: rgba(0, 0, 0, .040);
    --glow-2: rgba(0, 0, 0, .030);
    --glow-3: rgba(0, 0, 0, .022);
    --glow-4: rgba(0, 0, 0, .018);
    --glow-opacity: 1;
    --grain-opacity: .05;

    --surface: rgba(0, 0, 0, .025);
    --surface-hover: rgba(0, 0, 0, .050);
    --border: rgba(0, 0, 0, .12);
    --border-strong: rgba(0, 0, 0, .30);
    --shadow: 0 6px 24px rgba(0, 0, 0, .06);
    --shadow-hover: 0 14px 40px rgba(0, 0, 0, .10);

    --surface-deep: rgba(255, 255, 255, .84);
    --surface-chrome: rgba(255, 255, 255, .80);

    --text: #0a0a0a;
    --text-muted: #565656;
    --text-subtle: #8c8c8c;
    --text-invert: #ffffff;

    --hairline: rgba(0, 0, 0, .11);

    --syn-key: #0a0a0a;
    --syn-str: #4a4a4a;
    --syn-num: #4a4a4a;
    --syn-lit: #262626;
    --syn-flag: #5c5c5c;
    --syn-cmt: #9e9e9e;
}