/* ───────────────────────────────────────────────────────────── * Sumeru Systems — Design Tokens * Single source of truth for color, spacing, type, motion. * Import: @import "/brand-kit/tokens/sumeru.css"; * ───────────────────────────────────────────────────────────── */ :root { /* ── Color · Brand ── */ --color-ink: #04050A; /* canvas, body type on light */ --color-ink-2: #0A0B14; /* one-shade-up surface */ --color-cream: #EDE4CC; /* light-mode canvas */ --color-gold: #C8A84A; /* accent · CTA · the apex */ --color-gold-light: #F2C966; --color-gold-dark: #B27815; --color-teal: #0EBFBF; /* reserve · live data accent */ --color-white: #FFFFFF; /* ── Color · Semantic (alias) ── */ --bg: var(--color-ink); --bg-elevated: var(--color-ink-2); --fg-primary: var(--color-white); --fg-secondary: rgba(255, 255, 255, 0.7); --fg-tertiary: rgba(255, 255, 255, 0.4); --fg-quaternary: rgba(255, 255, 255, 0.18); --accent: var(--color-gold); --accent-soft: rgba(200, 168, 74, 0.18); --hairline: rgba(255, 255, 255, 0.06); /* Light-mode overrides (data-theme="cream") */ /* Apply: */ /* ── Type ── */ --font-display: 'Josefin Sans', 'system-ui', sans-serif; --font-editorial: 'Cormorant Garamond', 'Georgia', serif; --font-engraved: 'Cinzel', 'Times New Roman', serif; --font-body: 'Tenor Sans', 'system-ui', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* ── Type · Scale ── */ --text-display-2xl: clamp(3.5rem, 6vw, 5.75rem); --text-display-xl: clamp(2.75rem, 4.5vw, 4.5rem); --text-display-lg: 2.5rem; --text-display-md: 2rem; --text-body-lg: 1.125rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.75rem; --text-micro: 0.625rem; /* ── Type · Tracking (the brand's signature) ── */ --tracking-wordmark: 0.7em; --tracking-label: 0.4em; --tracking-button: 0.25em; --tracking-body: 0; /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* ── Radius ── */ --radius-sm: 3px; --radius: 6px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 28px; /* ── Stroke (the line-art aesthetic) ── */ --stroke-hairline: 0.5px; --stroke-fine: 1px; --stroke-default: 1.5px; --stroke-bold: 2.5px; /* ── Motion ── */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-line: cubic-bezier(.5, 0, .3, 1); --dur-fast: 0.18s; --dur: 0.32s; --dur-slow: 0.6s; --dur-draw: 1s; } [data-theme="cream"] { --bg: var(--color-cream); --bg-elevated: #FFFFFF; --fg-primary: var(--color-ink); --fg-secondary: rgba(4, 5, 10, 0.72); --fg-tertiary: rgba(4, 5, 10, 0.45); --fg-quaternary: rgba(4, 5, 10, 0.18); --hairline: rgba(4, 5, 10, 0.08); }