/* ============================================================ Alchemy Sports Ventures — Design tokens (production) ------------------------------------------------------------ Single source of truth for color, type, spacing, elevation and base element styling. Ported verbatim from the Claude Design system ("The Clubhouse Terminal"). Fonts are loaded via in each page's . ============================================================ */ /* ---------- COLOR ---------- */ /* ---------- FONTS (type system v2) ---------- Self-hosted latin subsets, identical files to the FFM build. No runtime Google Fonts request — faster, and it keeps the privacy posture consistent across both properties (ASV plans a consent banner for GA4; a font CDN call fires before any banner can be answered). Two families, three roles: Schibsted Grotesk — everything language does. Variable, 400-800. Archivo 700 — standalone emphasised figures at 28px and above, only. Hanken Grotesk removed entirely. IBM Plex Mono deliberately NOT loaded; v1 specified it and the shipped site never adopted it. If a format ever genuinely needs a monospace (code sample, data export, terminal panel) the pre-set answer is IBM Plex Mono 400/500/600 — decided, not reopened. */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../assets/fonts/schibsted-grotesk-latin.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/archivo-700-latin.woff2') format('woff2'); } :root { /* Navy — institutional brand anchor (royal blue) */ --navy-50: #eef0fa; --navy-100: #dde2f5; --navy-200: #bcc4ea; --navy-300: #8d9bd9; --navy-400: #5f72c6; --navy-500: #3a4fb0; --navy-600: #2b3d92; --navy-700: #1f2d75; --navy-800: #15205c; --navy-900: #0c1446; /* base royal blue (palette anchor) */ --navy-950: #05081f; /* near-black — "locker room" dark */ /* Gold — striking, burnished signature accent */ --gold-50: #fef8ea; --gold-100: #fceed2; --gold-200: #fae0ad; --gold-300: #f5ce80; --gold-400: #efbb52; --gold-500: #e3a52b; /* signature striking gold */ --gold-600: #c98e1e; --gold-700: #a5731a; --gold-800: #7e5717; --gold-900: #553a11; --gold-950: #2f2008; /* Sky — data, links, interaction */ --sky-50: #eef5fc; --sky-100: #d8e8f8; --sky-200: #b5d2f0; --sky-300: #88b6e6; --sky-400: #5e9ad9; --sky-500: #3e89d4; --sky-600: #2d77bf; --sky-700: #245f9a; --sky-800: #1f4d7a; --sky-900: #1c4063; /* Walnut — heritage clubhouse wood surfaces (accent) */ --walnut-300: #c39e6f; --walnut-400: #a67c4e; --walnut-500: #855f38; --walnut-600: #6a4a2a; --walnut-700: #4f371f; --walnut-800: #3a2817; --walnut-900: #2a1c10; /* Stone — cool, sage-influenced premium neutrals */ --stone-50: #f7f7f5; --stone-100: #eeeeea; --stone-200: #e0e1db; --stone-300: #cacbc3; --stone-400: #a8a9a1; --stone-500: #84857d; --stone-600: #60605b; --stone-700: #494a45; --stone-800: #333430; --stone-900: #1f201d; --stone-950: #131410; --white: #ffffff; --black: #0a0b08; /* Semantic — status */ --green-100: #d8efe1; --green-500: #2f9e63; /* pitch green — positive / gains */ --green-600: #248050; --green-700: #1d6741; --red-100: #f7dcd9; --red-500: #cf4a3f; /* losses / destructive */ --red-600: #b23a30; --red-700: #8f2e26; --amber-100: #fbe7c4; --amber-500: #d98a1f; /* caution */ --amber-600: #b66f15; /* Brand */ --brand: var(--navy-900); --brand-strong: var(--navy-950); --accent: var(--gold-500); --accent-hover: var(--gold-600); --accent-soft: var(--gold-100); /* Surfaces */ --bg-canvas: var(--stone-50); --surface-page: var(--stone-50); --surface-card: var(--white); --surface-raised: var(--white); --surface-sunken: var(--stone-100); --surface-inverse: var(--navy-900); --surface-inverse-2:var(--navy-950); --surface-wood: var(--walnut-700); /* Text */ --text-primary: var(--stone-900); --text-secondary: var(--stone-700); --text-muted: var(--stone-500); --text-inverse: var(--stone-50); --text-inverse-mut: var(--navy-200); --text-accent: var(--gold-700); --text-link: var(--sky-700); /* Borders */ --border-subtle: var(--stone-200); --border-default: var(--stone-300); --border-strong: var(--stone-400); --border-inverse: rgba(255,255,255,0.12); --border-accent: var(--gold-500); /* Data / finance directional */ --pos: var(--green-600); --pos-soft: var(--green-100); --neg: var(--red-600); --neg-soft: var(--red-100); --neutral-data: var(--stone-500); /* Focus ring */ --ring: var(--sky-500); } /* Inverse / "Locker room" scope — wrap any subtree in [data-theme="locker"] */ [data-theme="locker"] { --bg-canvas: var(--navy-950); --surface-page: var(--navy-950); --surface-card: var(--navy-900); --surface-raised: var(--navy-800); --surface-sunken: var(--navy-950); --surface-inverse: var(--stone-50); --text-primary: var(--stone-50); --text-secondary: var(--navy-200); --text-muted: var(--navy-300); --text-inverse: var(--stone-900); --text-accent: var(--gold-400); --text-link: var(--sky-300); --border-subtle: rgba(255,255,255,0.08); --border-default: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.24); --border-accent: var(--gold-500); --pos: var(--green-500); --neg: var(--red-500); } /* ---------- TYPOGRAPHY ---------- */ :root { /* v2: display and body are deliberately identical. Hierarchy now comes from size and weight, not from family. Both tokens stay so existing references resolve. --font-figure is the ONLY place Archivo is allowed. */ --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; --font-figure: 'Archivo', 'Helvetica Neue', sans-serif; /* 28px+ standalone figures only */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold:800; --fw-black: 900; /* NB: Schibsted Grotesk's variable axis stops at 800 — 900 renders as 800. Do not set type at --fw-black. */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 62px; --text-6xl: 80px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.65; --ls-tighter: -0.03em; --ls-tight: -0.015em; --ls-normal: 0em; --ls-wide: 0.04em; --ls-wider: 0.12em; --display-font: var(--font-display); --display-weight: var(--fw-extrabold); --display-ls: var(--ls-tight); --display-lh: var(--lh-tight); --heading-font: var(--font-display); --heading-weight: var(--fw-bold); --body-font: var(--font-body); --body-weight: var(--fw-regular); --body-lh: var(--lh-normal); --eyebrow-font: var(--font-body); --eyebrow-weight: var(--fw-medium); --eyebrow-ls: 0.10em; /* v2: was 0.12em. Schibsted's caps are narrower and more angled, so the same value opens further. */ --eyebrow-size: var(--text-2xs); --numeric-font: var(--font-body); /* Lining figures only. "tnum" is deliberately absent: Schibsted's tabular set gives the comma and point a full character width, which renders EUR 10,646,951 as "10 , 646 , 951". Same decision as the FFM build. */ --numeric-feat: "lnum" 1; } /* ---------- SPACING, RADII & LAYOUT ---------- */ :root { --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 128px; --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 22px; --radius-full: 999px; --border-hairline: 1px; --border-thin: 1.5px; --border-thick: 2px; --border-accent-w: 3px; --container-sm: 640px; --container-md: 860px; --container-lg: 1120px; --container-xl: 1320px; --gutter: 24px; --sidebar-w: 264px; --topbar-h: 60px; --z-base: 0; --z-sticky: 100; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; } /* ---------- ELEVATION & MOTION ---------- */ :root { --shadow-xs: 0 1px 2px rgba(12, 20, 70, 0.06); --shadow-sm: 0 1px 3px rgba(12, 20, 70, 0.08), 0 1px 2px rgba(12, 20, 70, 0.05); --shadow-md: 0 4px 12px rgba(12, 20, 70, 0.08), 0 2px 4px rgba(12, 20, 70, 0.06); --shadow-lg: 0 12px 28px rgba(12, 20, 70, 0.12), 0 4px 8px rgba(12, 20, 70, 0.06); --shadow-xl: 0 24px 56px rgba(12, 20, 70, 0.18), 0 8px 16px rgba(12, 20, 70, 0.08); --shadow-inset: inset 0 1px 2px rgba(12, 20, 70, 0.07); --glow-gold: 0 0 0 3px rgba(227, 165, 43, 0.28); --glow-sky: 0 0 0 3px rgba(62, 137, 212, 0.30); --focus-ring: 0 0 0 3px rgba(62, 137, 212, 0.30); --focus-ring-offset: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--ring); --ease-standard: cubic-bezier(0.20, 0.00, 0.10, 1.00); --ease-out: cubic-bezier(0.16, 1.00, 0.30, 1.00); --ease-in: cubic-bezier(0.50, 0.00, 0.75, 0.00); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ---------- BASE ELEMENT STYLES ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--text-primary); margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } .num, [data-num] { font-family: var(--font-body); font-feature-settings: var(--numeric-feat); letter-spacing: 0; } ::selection { background: var(--gold-200); color: var(--navy-900); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }