/* ===================================================================== ALBAN — DESIGN SYSTEM "B 黎明 / Dawn" tokens.css — design tokens only (:root). No components live here. --------------------------------------------------------------------- Layers: 1. Color (raw palette + semantic aliases) 2. Typography (font families + fluid type scale) 3. Spacing scale (--s-1 .. --s-12) 4. Radii 5. Shadows / glows 6. Motion (durations + easings) 7. Layout primitives (container, hairlines) Dark is the DEFAULT theme. `@media (prefers-color-scheme: light)` overrides the *semantic* tokens only — components never reference raw palette values directly, so the light theme falls out for free. You can also force a theme with . ===================================================================== */ :root { /* --------------------------------------------------------------- 1. COLOR — raw palette (Dawn) Never reference these directly in components; use the semantic aliases below so light-mode override works. ---------------------------------------------------------------- */ --void: #0A0B0D; --night: #121316; --indigo: #17181C; --indigo-deep: #101114; --dawn-1: #3D5BD9; /* deep dawn blue */ --dawn-2: #7CA1FF; /* light dawn blue */ --gold: #E8B860; /* daybreak gold */ --ice: #F2F3F5; /* near-white headings */ --text-raw: #C9CCD3; --muted-raw: #9AA0AB; /* secondary text/labels — raised from #7C85A0 for WCAG AA 4.5:1 on --void */ /* ---- Semantic color aliases (dark default) ---- */ --bg: var(--void); /* page background base */ --bg-elevated: var(--night); /* raised surfaces */ --surface: rgba(255, 255, 255, 0.04); /* glass card fill */ --surface-2: rgba(255, 255, 255, 0.025); --surface-solid: #131418; /* opaque fallback for glass */ --header-bg: rgba(10, 11, 13, 0.72); /* sticky nav glass */ --drawer-bg: rgba(13, 14, 16, 0.97);/* mobile drawer (near-solid) */ --text: var(--text-raw); /* body text */ --heading: var(--ice); /* display headings */ --muted: var(--muted-raw); /* secondary text, labels */ --accent: var(--gold); /* primary accent */ --accent-strong: #D9A54E; --accent-2: var(--gold); /* secondary accent / numerals */ --on-accent: var(--void); /* text on a gold/blue fill */ --hairline: rgba(255, 255, 255, 0.09); /* 1px dividers / borders */ --hairline-strong: rgba(255, 255, 255, 0.17); --glow: rgba(232, 184, 96, 0.14); /* ambient blue glow */ --glow-gold: rgba(232, 184, 96, 0.18); --placeholder: #8A93AD; /* form placeholder text (opacity-free, AA on field bg) */ --tint-accent-weak: rgba(232, 184, 96, 0.06); /* kicker / glass btn ground */ --tint-gold-weak: rgba(232, 184, 96, 0.06); /* hover ground / preview tint */ /* Gradient tokens removed — SUMI redesign bans decorative gradients (baseline-ui) */ /* Focus ring (a11y) */ --focus-ring: var(--gold); --focus-ring-contrast: var(--void); /* Status colors (forms / toasts) */ --ok: #59C9A5; --warn: var(--gold); --error: #FF6B7A; /* --------------------------------------------------------------- 2. TYPOGRAPHY ---------------------------------------------------------------- */ --font-display: 'Spectral', Georgia, 'Times New Roman', serif; /* 300–500 */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* 200–700 */ --font-jp: 'Noto Sans JP', var(--font-body); /* Japanese */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* specs / numerals */ /* Weights */ --fw-thin: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Fluid type scale — clamp(min, preferred, max). Steps roughly follow a 1.2 modular scale at the small end and open up on the display sizes for the editorial hero feel. */ --fs-2xs: 0.6875rem; /* 11px — eyebrows, meta */ --fs-xs: 0.75rem; /* 12px — labels, badges */ --fs-sm: 0.8125rem; /* 13px — small body, nav */ --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); /* 15–16px — body */ --fs-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16–18px — lead text */ --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); /* 18–22px */ --fs-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); /* 22–30px — card h3 */ --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); /* 28–40px — small h2 */ --fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* 36–60px — section h2 */ --fs-4xl: clamp(2.75rem, 1.4rem + 5.6vw, 4.5rem); /* 44–72px — hero h1 */ --fs-5xl: clamp(3rem, 1.2rem + 7.4vw, 6rem); /* 48–96px — display CTA */ /* Line heights & tracking */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-body: 1.7; --lh-relaxed: 1.8; --ls-display: -0.02em; --ls-tight: -0.025em; --ls-wide: 0.04em; --ls-eyebrow: 0.12em; --ls-kicker: 0.08em; /* --------------------------------------------------------------- 3. SPACING SCALE (--s-1 .. --s-12) Geometric-ish ramp. Used for padding, gaps, section rhythm. ---------------------------------------------------------------- */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 2.5rem; /* 40 */ --s-8: 3rem; /* 48 */ --s-9: 4rem; /* 64 */ --s-10: 5rem; /* 80 */ --s-11: 7.5rem; /* 120 */ --s-12: 10rem; /* 160 */ /* Fluid section padding (vertical rhythm for big sections) */ --section-y: clamp(4.5rem, 3rem + 7vw, 8.75rem); --section-y-lg: clamp(5.5rem, 3rem + 9vw, 10rem); --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem); /* horizontal page padding */ /* --------------------------------------------------------------- 4. RADII ---------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; --r-circle: 50%; /* --------------------------------------------------------------- 5. SHADOWS / GLOWS ---------------------------------------------------------------- */ --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.40); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.45); --shadow-xl: 0 50px 100px rgba(0, 0, 0, 0.50); --shadow-pill: 0 10px 26px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 0 1px var(--hairline); /* --------------------------------------------------------------- 6. MOTION ---------------------------------------------------------------- */ --dur-1: 0.15s; --dur-2: 0.2s; --dur-3: 0.45s; --dur-4: 0.6s; --dur-5: 0.8s; /* reveal transform — see main.css .reveal */ --dur-slow: 0.9s; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expressive ease-out */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot */ /* --------------------------------------------------------------- 7. LAYOUT PRIMITIVES ---------------------------------------------------------------- */ --container: 1320px; --container-narrow: 820px; /* prose / article measure */ --header-h: 72px; /* used for scroll-margin / sticky offsets */ --z-header: 50; --z-drawer: 80; --z-overlay: 70; --z-toast: 90; color-scheme: dark; } /* ===================================================================== LIGHT THEME — overrides semantic aliases only. Auto via system preference, OR forced with . Raw palette stays intact; we just remap meaning + adjust a few hues so contrast stays >= 4.5:1 on the lighter ground. Two arms below — FORCED (data-theme="light") and AUTO (prefers-color -scheme: light) — carry an IDENTICAL declaration set. Pure CSS cannot share one block across a media boundary without a preprocessor, so the contract is: edit both arms together. They were previously out of sync (the forced arm was missing --grad-pill and --shadow-glow); they are now verified identical. The AUTO arm also excludes data-theme="light" so the forced rule wins cleanly when a user opts in on a light-OS machine. ===================================================================== */ /* FORCED light — wins over system preference both ways. */ :root[data-theme="light"] { --bg: #F4F6FC; --bg-elevated: #FFFFFF; --surface: rgba(255, 255, 255, 0.72); --surface-2: rgba(244, 246, 252, 0.80); --surface-solid: #FFFFFF; --header-bg: rgba(244, 246, 252, 0.72); --drawer-bg: rgba(255, 255, 255, 0.98); --text: #2A3350; /* ~7:1 on --bg */ --heading: #0F1730; --muted: #586079; /* ~4.6:1 on --bg */ --placeholder: #586079; /* opacity-free placeholder, AA on field bg */ --accent: #806015; /* darkened dawn blue for contrast on light */ --accent-strong: #6B4F0E; --accent-2: #806015; /* darkened gold — 4.5:1+ on --bg (#F4F6FC) */ --on-accent: #FFFFFF; --hairline: rgba(15, 23, 48, 0.12); --hairline-strong: rgba(15, 23, 48, 0.22); --glow: rgba(128, 96, 21, 0.14); --glow-gold: rgba(232, 184, 96, 0.20); --tint-accent-weak: rgba(128, 96, 21, 0.06); --tint-gold-weak: rgba(154, 110, 22, 0.08); /* darker ends so it doesn't wash out on light */ --shadow-sm: 0 8px 24px rgba(15, 23, 48, 0.08); --shadow-md: 0 20px 50px rgba(15, 23, 48, 0.10); --shadow-lg: 0 30px 80px rgba(61, 91, 217, 0.12); --shadow-xl: 0 60px 120px rgba(61, 91, 217, 0.14); --shadow-glow: 0 0 0 1px var(--hairline); --focus-ring: #806015; --focus-ring-contrast: #FFFFFF; color-scheme: light; } /* AUTO light — mirror of the forced block above. Keep in sync. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --bg: #F4F6FC; --bg-elevated: #FFFFFF; --surface: rgba(255, 255, 255, 0.72); --surface-2: rgba(244, 246, 252, 0.80); --surface-solid: #FFFFFF; --header-bg: rgba(244, 246, 252, 0.72); --drawer-bg: rgba(255, 255, 255, 0.98); --text: #2A3350; --heading: #0F1730; --muted: #586079; --placeholder: #586079; --accent: #806015; --accent-strong: #6B4F0E; --accent-2: #806015; --on-accent: #FFFFFF; --hairline: rgba(15, 23, 48, 0.12); --hairline-strong: rgba(15, 23, 48, 0.22); --glow: rgba(128, 96, 21, 0.14); --glow-gold: rgba(232, 184, 96, 0.20); --tint-accent-weak: rgba(128, 96, 21, 0.06); --tint-gold-weak: rgba(154, 110, 22, 0.08); --shadow-sm: 0 8px 24px rgba(15, 23, 48, 0.08); --shadow-md: 0 20px 50px rgba(15, 23, 48, 0.10); --shadow-lg: 0 30px 80px rgba(61, 91, 217, 0.12); --shadow-xl: 0 60px 120px rgba(61, 91, 217, 0.14); --shadow-glow: 0 0 0 1px var(--hairline); --focus-ring: #806015; --focus-ring-contrast: #FFFFFF; color-scheme: light; } } :root[data-theme="dark"] { color-scheme: dark; } /* ---- 和 (Japanese) accent — 朱 vermilion from the ALBAN GLOBAL logo tile ---- */ :root { --shu: #C20B21; /* brand vermilion (sampled from logo) */ --shu-bright: #E8556A; /* lighter vermilion for accents on dark */ --glow-shu: rgba(226, 60, 80, 0.22); } :root[data-theme="light"] { --shu-bright: #B0142A; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --shu-bright: #B0142A; } }