/* ============================================================================= TOKENS.CSS — Design Tokens ----------------------------------------------------------------------------- The single source of truth for the visual language, reverse-engineered from a premium fintech marketing site. Every value here is brand-neutral: swap the color ramps and font names to re-skin the whole system without touching components. Naming convention: --color-* raw palette --brand-* semantic brand roles (map to palette) --surface-* background layers --text-* foreground roles --gradient-* composed gradients --shadow-* elevation --radius-* corner rounding --blur-* backdrop / glass --font-* typography --space-* spacing scale --dur-x / --ease-x motion ========================================================================== */ :root { /* --------------------------------------------------------------------------- 1. RAW PALETTE Dark luxury base. Deep midnight-navy surfaces carry warm champagne text, lit by a metallic-gold accent and a soft gold support sheen, plus a sapphire ramp for jewel "cards / data" moments. NOTE ON NAMING: family names are kept from the original ramp (ink / paper / coral / sage-mint / lav) so components need no edits, but their MEANING has been re-skinned: ink → warm champagne (now the LIGHT foreground family) paper → midnight navy (now the DARK surface family) coral → metallic gold (the accent family) sage/mint → soft gold (support sheen) lav → sapphire (jewel data cards) --------------------------------------------------------------------------- */ /* Champagne scale (primary FOREGROUND family — light text on dark) */ --color-ink-900: #fbf8f0; /* brightest highlight text */ --color-ink-800: #f6f2e9; /* PRIMARY text — warm champagne */ --color-ink-700: #e7e0d0; /* secondary / body text */ --color-ink-500: #cabfa6; /* soft champagne */ /* Midnight navy scale (SURFACE family — dark backgrounds) */ --color-paper-000: #13223c; /* raised cards (lightest navy) */ --color-paper-050: #0a1120; /* PRIMARY surface — page background */ --color-paper-100: #0e1626; /* elevated navy */ --color-paper-150: #0e1626; /* recessed / sunken navy */ --color-paper-200: #13223c; --color-paper-300: #1b2c4a; --color-paper-400: #26395e; /* Neutral slate (muted text on navy) */ --color-grey-500: #8b93a7; --color-black: #000000; /* Gold / accent scale (calls-to-action, highlights, glow) */ --color-coral-600: #b8912f; /* PRIMARY accent — antique gold */ --color-coral-500: #d4af37; /* vivid accent — metallic gold */ --color-coral-400: #e0c25c; --color-coral-300: #ecd48a; --color-coral-200: #f4e6b4; /* gold glow */ --color-coral-100: #faf3da; /* Soft gold (support sheen gradient family) */ --color-sage-500: #c69a35; --color-mint-200: #f0e2ac; /* Sapphire ramp (cool "data / card" jewel family) */ --color-lav-100: #24406e; --color-lav-200: #1e3760; --color-lav-300: #182c4e; --color-lav-400: #12213c; /* --------------------------------------------------------------------------- 2. SEMANTIC ROLES (components should reference THESE, not raw palette) --------------------------------------------------------------------------- */ /* Primary = deep navy control (light text sits on it); gold is the ACCENT. Navy-on-gold is the signature luxury pairing (see --text-on-accent). */ --brand-primary: var(--color-paper-300); /* #1b2c4a deep navy */ --brand-primary-strong: var(--color-paper-200); /* #13223c pressed */ --brand-secondary: var(--color-ink-500); /* soft champagne */ --brand-accent: var(--color-coral-600); /* antique gold */ --brand-accent-vivid: var(--color-coral-500); /* metallic gold */ --brand-support: var(--color-coral-500); --surface-page: var(--color-paper-050); /* #0a1120 midnight */ --surface-raised: var(--color-paper-000); /* #13223c card */ --surface-sunken: var(--color-paper-150); /* #0e1626 recess/hover */ --surface-inverse: var(--color-black); /* deepest immersive panel */ --surface-inverse-2: #05070e; --text-strong: var(--color-ink-800); /* champagne */ --text-body: var(--color-ink-700); --text-muted: var(--color-grey-500); --text-on-dark: var(--color-ink-800); /* light text on navy / dark buttons */ --text-on-accent:var(--color-paper-050); /* navy text on gold */ /* Faint gold hairlines — a luxury signature on the dark base */ --border-hairline: color-mix(in srgb, var(--color-coral-500) 14%, transparent); --border-strong: color-mix(in srgb, var(--color-coral-500) 28%, transparent); /* --------------------------------------------------------------------------- 3. OPACITY TOKENS (the site leans on a handful of fixed alpha steps) --------------------------------------------------------------------------- */ --alpha-04: 0.04; --alpha-10: 0.10; --alpha-15: 0.15; --alpha-20: 0.20; --alpha-30: 0.30; --alpha-40: 0.40; --alpha-70: 0.70; /* Ready-made translucent champagne (light-on-dark overlays, glass, hairlines). On a dark base the "visible" subtle overlay must be LIGHT, so these carry the champagne tint rather than a dark ink. */ --ink-a10: rgb(246 242 233 / 0.06); --ink-a20: rgb(246 242 233 / 0.12); --ink-a30: rgb(246 242 233 / 0.22); --ink-a40: rgb(246 242 233 / 0.36); --paper-a20: rgb(246 242 233 / 0.20); --paper-a30: rgb(246 242 233 / 0.30); --paper-a40: rgb(246 242 233 / 0.40); --white-a30: rgb(255 255 255 / 0.30); --white-a70: rgb(255 255 255 / 0.70); --black-a10: rgb(0 0 0 / 0.10); --black-a30: rgb(0 0 0 / 0.30); /* --------------------------------------------------------------------------- 4. GRADIENTS --------------------------------------------------------------------------- */ /* Brand support gradient — deep gold to soft gold sheen */ --gradient-support: linear-gradient(to bottom, var(--color-sage-500), var(--color-mint-200)); --gradient-support-up: linear-gradient(to top, var(--color-sage-500), var(--color-mint-200)); /* Warm hero wash — gold fading to nothing */ --gradient-peach-fade: linear-gradient(180deg, rgb(212 175 55 / 0.30) 0%, transparent 100%); /* Ambient gold glow (radial) — place behind hero imagery */ --gradient-glow: radial-gradient(54% 54% at 98% 50%, rgb(212 175 55 / 0.22) 0%, transparent 95%); --gradient-glow-soft: radial-gradient(circle, rgb(212 175 55 / 0.06), transparent 34%); /* Metallic sheen — swept champagne highlight for buttons / cards on hover */ --gradient-sheen: linear-gradient(105deg, transparent 20%, rgb(246 242 233 / 0.28) 40% 60%, transparent 80%); /* Static gold text fill — for the one or two KEY WORDS in a heading. MONOTONIC light → deep, so the ramp reads as one light source falling across the word. A non-monotonic ramp (light → deep → light) looks like struck metal on a long phrase but leaves the middle of a short word dark and the ends bright, and .ds-em fills each word independently. */ --gradient-gold-text: linear-gradient(96deg, var(--color-coral-200) 0%, var(--color-coral-400) 30%, var(--color-coral-500) 65%, var(--color-coral-600) 100%); /* Gold hairline gradient — 1px borders that fade in and out along the edge, so a card outline catches light on two corners instead of ringing evenly. */ --gradient-gold-hair: linear-gradient(120deg, rgb(212 175 55 / 0.55), rgb(212 175 55 / 0.05) 55%, rgb(212 175 55 / 0.35)); /* Ambient light orbs — what glass panes actually blur. Radial, never filter: blur(), which would cost a full-surface repaint on every scroll. */ --aura-gold: radial-gradient(closest-side, rgb(212 175 55 / 0.16), transparent); --aura-sapphire: radial-gradient(closest-side, rgb(36 64 110 / 0.55), transparent); /* Shimmering text fill (animate background-position for a gold sweep) */ --gradient-text-shimmer: linear-gradient(90deg, var(--color-ink-800) 0%, var(--color-coral-500) 41.5%, var(--color-ink-800) 100%); /* Sapphire card gradient */ --gradient-lav: linear-gradient(to bottom left, var(--color-lav-100), var(--color-lav-400)); /* Long soft scrim used to fade content under sticky UI (top & bottom) */ --gradient-scrim-bottom: linear-gradient(to top, rgb(0 0 0 / 0.54) 0%, transparent 100%); --gradient-scrim-top: linear-gradient(to bottom, rgb(0 0 0 / 0.54) 0%, transparent 100%); /* --------------------------------------------------------------------------- 5. SHADOWS / ELEVATION Warm, low-contrast shadows (tinted toward the brown ink, never pure black). --------------------------------------------------------------------------- */ --shadow-none: none; --shadow-xs: 0 3px 10px 1px rgb(15 12 12 / 0.20); --shadow-card: 0 6px 12px rgb(0 0 0 / 0.10); --shadow-elevated: 0 4px 14px rgb(0 0 0 / 0.15); --shadow-float: 0 20px 60px rgb(0 0 0 / 0.30); /* Deep ambient — long, soft, near-black; for hero art & floating phones */ --shadow-ambient: -20px 30px 60px rgb(0 0 0 / 0.50); --shadow-ambient-lg: -40px 90px 90px rgb(0 0 0 / 0.55); /* Inner gold warmth for pressed / glass surfaces */ --shadow-inset-glow: inset 0 6px 14px -3px rgb(212 175 55 / 0.06), 0 6px 12px rgb(0 0 0 / 0.35); --shadow-focus: inset 0 0 0 2px rgb(212 175 55 / 0.9); /* --------------------------------------------------------------------------- 6. RADIUS Two systems: a standard scale AND the signature "chat bubble" (one corner squared off, echoing the product's messaging UI). --------------------------------------------------------------------------- */ --radius-xs: 8px; --radius-sm: 16px; --radius-md: 24px; --radius-lg: 40px; --radius-xl: 56px; --radius-2xl: 88px; --radius-pill: 50px; --radius-circle: 50%; /* Signature speech-bubble radii (bottom-left corner squared) */ --radius-bubble-sm: 8px 8px 8px 0; --radius-bubble-md: 24px 24px 24px 0; --radius-bubble-lg: 32px 32px 32px 0; /* Responsive semantic radii (overridden per breakpoint in responsive.css) */ --radius-block-small: 16px; --radius-block-medium: 24px; --radius-block-large: 48px; --radius-block-card: 48px; /* --------------------------------------------------------------------------- 7. BLUR (glassmorphism) --------------------------------------------------------------------------- */ --blur-xs: 1.5px; --blur-sm: 3px; --blur-md: 6px; --blur-lg: 18px; --blur-xl: 32px; --blur-2xl: 40px; --glass-fill: rgb(8 13 26 / 0.72); /* navy glass (nav on imagery) */ --glass-fill-light: rgb(246 242 233 / 0.08);/* faint champagne glass */ /* Composed glass recipe — the .ds-glass primitive reads ONLY these, so the whole site's glass is retuned from here. The tint is a gradient (not a flat alpha) because real glass catches more light on its top edge. */ --glass-tint: linear-gradient(150deg, rgb(246 242 233 / 0.075), rgb(246 242 233 / 0.02)); --glass-tint-strong: linear-gradient(150deg, rgb(246 242 233 / 0.11), rgb(246 242 233 / 0.035)); --glass-border: rgb(246 242 233 / 0.10); --glass-blur: blur(var(--blur-lg)) saturate(140%); /* inset top line = specular edge; long soft drop = the pane floating */ --glass-shadow: inset 0 1px 0 rgb(246 242 233 / 0.10), 0 24px 48px -24px rgb(0 0 0 / 0.70); --glass-shadow-lit: inset 0 1px 0 rgb(246 242 233 / 0.16), 0 28px 56px -22px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(212 175 55 / 0.18); /* Pointer-tracked highlight that sweeps across a glass pane on hover */ --glass-spotlight: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgb(246 242 233 / 0.07), transparent 60%); /* --------------------------------------------------------------------------- 8. TYPOGRAPHY Two families: a geometric editorial sans (Sora) + a technical mono (JetBrains Mono) for labels / eyebrows / data. Both variable, declared via @font-face in typography.css. To re-brand, swap the two stacks below and the @font-face blocks — nothing else references a family name. --------------------------------------------------------------------------- */ --font-sans: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace; /* Weights (the source uses an unusual 450 "book" as its body default) */ --weight-light: 300; --weight-normal: 400; --weight-book: 450; /* primary body weight */ --weight-medium: 500; --weight-bold: 700; /* Fluid type scale — see the calc() helper in typography.css. These are the *reference* px sizes at design width; actual rendered size scales with the viewport. */ --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px; --fs-64: 64px; --fs-88: 88px; /* Line heights */ --lh-tight: 1.0625; /* display headings */ --lh-heading: 1.1; --lh-snug: 1.16667; --lh-body: 1.25; --lh-relaxed: 1.33333; /* Letter spacing */ --ls-display: -0.02em; /* Sora already ships tight sidebearings on display sizes, so the mega tracking is gentler than a Helvetica-class grotesque would need. */ --ls-mega: -0.045em; /* very large display */ --ls-mono: 0.02em; /* mono eyebrows/labels */ --ls-mono-tight: 0.01em; /* --------------------------------------------------------------------------- 9. SPACING SCALE (base unit 0.25rem = 4px, plus semantic layout gutters) --------------------------------------------------------------------------- */ --space-unit: 0.25rem; /* 4px */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* --------------------------------------------------------------------------- 10. LAYOUT / GRID (fluid engine — values re-set per breakpoint) --------------------------------------------------------------------------- */ --root-columns: 4; /* mobile default; 8 tablet, 12 laptop+ */ --columns: var(--root-columns); --gutter-outer: 16px; /* page side padding */ --gutter-inner: 16px; /* space between columns */ --gutter-slim: 8px; --container-max: 90rem; /* 1440px cap */ --container-md: 28rem; /* Fluid scaling engine (drives the calc() font/space formula) */ --scale-modifier: 0.2; /* 0 = fixed px, 1 = pure vw. mobile 0.2 */ --target-window-width: 375; /* design width for current breakpoint */ /* --------------------------------------------------------------------------- 11. MOTION --------------------------------------------------------------------------- */ --dur-fast: 0.15s; --dur-base: 0.2s; --dur-slow: 0.3s; --dur-slower: 0.5s; --dur-reveal: 1s; /* The source's default curve is a near-linear ease used everywhere */ --ease-linear: cubic-bezier(0, 0, 1, 1); --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* --------------------------------------------------------------------------- 12. Z-INDEX --------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-drawer: 900; --z-modal: 1000; --z-toast: 1100; /* LED accent (buttons) */ --led-color-off: rgb(246 242 233 / 0.25); --led-color-on: var(--color-coral-500); } /* Deepest-panel helper — apply to any section that sits on --surface-inverse (near-black). Re-asserts champagne text and faint gold hairlines. */ [data-tone="dark"] { --text-strong: var(--color-ink-800); --text-body: var(--paper-a70, rgb(246 242 233 / 0.72)); --text-muted: rgb(246 242 233 / 0.5); --border-hairline: rgb(212 175 55 / 0.16); --border-strong: rgb(212 175 55 / 0.30); }