/* Hallmark · tokens · custom theme * vibe: "pastel dawn sky, layered liquid glass" * source palette: #7DA0D8 · #B9C0E2 · #D6C8EC · #D5BCE0 · #EDACD1 · #EFA9CD * paper-band: dual (dark oklch(18%) / light oklch(97%)) * display-style: grotesk-sans (Space Grotesk) * accent-hue: cool (cornflower 266°) + chromatic-other (blossom 346°) * * GLASS DEPTH SYSTEM — three tiers, each with its own blur / tint / edge. * g1 chrome · dock, top bar, command palette · strongest blur, most opaque * g2 surface · cards, panels · mid blur * g3 inset · wells, tracks, nested rows · faint, recessed */ :root { /* ---- type ---- */ --font-display: "Space Grotesk", "Noto Sans TC", system-ui, sans-serif; --font-body: "Inter", "Noto Sans TC", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Noto Sans TC", ui-monospace, monospace; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-hero: clamp(2.25rem, 7vw, 3.75rem); /* ---- 4pt space scale ---- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; /* ---- radius ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px; /* ---- motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-mid: 260ms; --dur-slow: 460ms; --rule-hair: 1px; } /* ═══════════ LIGHT — 破曉天空 ═══════════ */ :root { --color-paper: oklch(97.5% 0.012 292); --color-ink: oklch(27% 0.055 288); --color-ink-2: oklch(49% 0.045 288); --color-ink-3: oklch(65% 0.038 292); --color-accent: oklch(52% 0.145 266); /* 矢車菊藍，加深到可讀 */ --color-accent-2: oklch(55% 0.165 346); /* 花瓣粉，加深到可讀 */ --color-warn: oklch(55% 0.175 22); --color-gold: oklch(62% 0.115 72); --color-focus: oklch(48% 0.16 266); --color-on-accent: oklch(99% 0.005 292); /* tier 1 — chrome */ --g1-bg: oklch(100% 0 0 / 0.68); --g1-blur: blur(32px) saturate(1.7); --g1-edge: oklch(100% 0 0 / 0.9); --g1-lift: 0 1px 2px oklch(35% 0.06 288 / 0.07), 0 16px 40px -12px oklch(40% 0.09 288 / 0.22); /* tier 2 — surface */ --g2-bg: oklch(100% 0 0 / 0.48); --g2-blur: blur(20px) saturate(1.55); --g2-edge: oklch(100% 0 0 / 0.78); --g2-lift: 0 1px 2px oklch(35% 0.06 288 / 0.05), 0 10px 28px -10px oklch(40% 0.09 288 / 0.18); /* tier 3 — inset well */ --g3-bg: oklch(70% 0.05 292 / 0.10); --g3-blur: blur(6px); --g3-edge: oklch(60% 0.06 290 / 0.13); --sheen: linear-gradient(180deg, oklch(100% 0 0 / 0.58), oklch(100% 0 0 / 0) 42%); --inner-lip: inset 0 1px 0 oklch(100% 0 0 / 0.85), inset 0 -1px 0 oklch(55% 0.05 290 / 0.06); --hover-wash: oklch(100% 0 0 / 0.58); --track: oklch(70% 0.05 292 / 0.22); /* 科目一 = 粉 · 科目三 = 藍 · 份量大 = 琥珀 */ --chip-a: oklch(55% 0.165 346 / 0.15); --chip-a-ink: oklch(42% 0.15 346); --chip-b: oklch(52% 0.145 266 / 0.14); --chip-b-ink: oklch(41% 0.14 266); --chip-c: oklch(58% 0.13 62 / 0.18); --chip-c-ink: oklch(43% 0.12 58); /* aurora — 直接用色票本身 */ --aura-1: oklch(71% 0.115 262 / 0.55); /* #7DA0D8 */ --aura-2: oklch(81% 0.055 288 / 0.55); /* #B9C0E2 */ --aura-3: oklch(80% 0.105 346 / 0.52); /* #EDACD1 */ --aura-4: oklch(84% 0.062 312 / 0.42); /* #D6C8EC */ --aura-veil: oklch(97.5% 0.012 292 / 0.34); --scrim: oklch(40% 0.07 288 / 0.32); color-scheme: light; } /* ═══════════ DARK — 夜空 ═══════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-paper: oklch(17.5% 0.035 288); --color-ink: oklch(95% 0.018 300); --color-ink-2: oklch(76% 0.032 294); --color-ink-3: oklch(60% 0.038 292); --color-accent: oklch(81% 0.085 268); /* #B9C0E2 */ --color-accent-2: oklch(80% 0.105 346); /* #EFA9CD */ --color-warn: oklch(78% 0.135 26); --color-gold: oklch(83% 0.105 76); --color-focus: oklch(85% 0.09 280); --color-on-accent: oklch(18% 0.045 288); --g1-bg: oklch(100% 0 0 / 0.09); --g1-blur: blur(36px) saturate(1.6); --g1-edge: oklch(100% 0 0 / 0.17); --g1-lift: 0 1px 2px oklch(6% 0.03 288 / 0.40), 0 20px 48px -14px oklch(6% 0.03 288 / 0.70); --g2-bg: oklch(100% 0 0 / 0.055); --g2-blur: blur(22px) saturate(1.45); --g2-edge: oklch(100% 0 0 / 0.115); --g2-lift: 0 1px 2px oklch(6% 0.03 288 / 0.34), 0 14px 34px -12px oklch(6% 0.03 288 / 0.60); --g3-bg: oklch(10% 0.03 288 / 0.34); --g3-blur: blur(6px); --g3-edge: oklch(100% 0 0 / 0.06); --sheen: linear-gradient(180deg, oklch(100% 0 0 / 0.10), oklch(100% 0 0 / 0) 46%); --inner-lip: inset 0 1px 0 oklch(100% 0 0 / 0.13), inset 0 -1px 0 oklch(5% 0.02 288 / 0.30); --hover-wash: oklch(100% 0 0 / 0.08); --track: oklch(100% 0 0 / 0.11); --chip-a: oklch(80% 0.105 346 / 0.17); --chip-a-ink: oklch(87% 0.085 346); --chip-b: oklch(81% 0.085 268 / 0.19); --chip-b-ink: oklch(88% 0.065 272); --chip-c: oklch(83% 0.105 76 / 0.16); --chip-c-ink: oklch(88% 0.085 76); --aura-1: oklch(50% 0.145 265 / 0.62); --aura-2: oklch(46% 0.10 292 / 0.48); --aura-3: oklch(54% 0.155 346 / 0.50); --aura-4: oklch(44% 0.11 315 / 0.36); --aura-veil: oklch(17.5% 0.035 288 / 0.30); --scrim: oklch(9% 0.03 288 / 0.60); color-scheme: dark; } } :root[data-theme="dark"] { --color-paper: oklch(17.5% 0.035 288); --color-ink: oklch(95% 0.018 300); --color-ink-2: oklch(76% 0.032 294); --color-ink-3: oklch(60% 0.038 292); --color-accent: oklch(81% 0.085 268); --color-accent-2: oklch(80% 0.105 346); --color-warn: oklch(78% 0.135 26); --color-gold: oklch(83% 0.105 76); --color-focus: oklch(85% 0.09 280); --color-on-accent: oklch(18% 0.045 288); --g1-bg: oklch(100% 0 0 / 0.09); --g1-blur: blur(36px) saturate(1.6); --g1-edge: oklch(100% 0 0 / 0.17); --g1-lift: 0 1px 2px oklch(6% 0.03 288 / 0.40), 0 20px 48px -14px oklch(6% 0.03 288 / 0.70); --g2-bg: oklch(100% 0 0 / 0.055); --g2-blur: blur(22px) saturate(1.45); --g2-edge: oklch(100% 0 0 / 0.115); --g2-lift: 0 1px 2px oklch(6% 0.03 288 / 0.34), 0 14px 34px -12px oklch(6% 0.03 288 / 0.60); --g3-bg: oklch(10% 0.03 288 / 0.34); --g3-blur: blur(6px); --g3-edge: oklch(100% 0 0 / 0.06); --sheen: linear-gradient(180deg, oklch(100% 0 0 / 0.10), oklch(100% 0 0 / 0) 46%); --inner-lip: inset 0 1px 0 oklch(100% 0 0 / 0.13), inset 0 -1px 0 oklch(5% 0.02 288 / 0.30); --hover-wash: oklch(100% 0 0 / 0.08); --track: oklch(100% 0 0 / 0.11); --chip-a: oklch(80% 0.105 346 / 0.17); --chip-a-ink: oklch(87% 0.085 346); --chip-b: oklch(81% 0.085 268 / 0.19); --chip-b-ink: oklch(88% 0.065 272); --chip-c: oklch(83% 0.105 76 / 0.16); --chip-c-ink: oklch(88% 0.085 76); --aura-1: oklch(50% 0.145 265 / 0.62); --aura-2: oklch(46% 0.10 292 / 0.48); --aura-3: oklch(54% 0.155 346 / 0.50); --aura-4: oklch(44% 0.11 315 / 0.36); --aura-veil: oklch(17.5% 0.035 288 / 0.30); --scrim: oklch(9% 0.03 288 / 0.60); color-scheme: dark; }