/* ====== v2 DESIGN TOKENS ====== LAYER 1 — PALETTE. Generated from v2/assets/tokens.json, the designer's Figma Variables export (collection "pradhiWebsiteToken", mode1, 57 tokens). Names mirror hers: primary900 -> --primary-900. Do not hand-edit; re-export and regenerate. LAYER 2 — ROLES. What the site actually uses. Each points at a palette token where one exists. Four do not yet have one and are held at their current value with a note — see docs/V2-TOKEN-MAPPING.md. LAYER 3 — TYPE / SPACE / LAYOUT. Type is read from the Figma text styles. */ /* ═══ LAYER 1 — PALETTE (from Figma) ═══════════════════════════════════ */ :root { /* Purple */ --primary-50: #EBE6EC; --primary-100: #BFB0C4; --primary-200: #A18AA8; --primary-300: #765480; --primary-400: #5B3367; --primary-500: #320041; --primary-600: #2E003B; --primary-700: #24002E; --primary-800: #1C0024; --primary-900: #15001B; /* Pale cyan (light accents, bands) */ --teal-50: #F5FDFD; --teal-100: #DFF9FA; --teal-200: #D0F6F8; --teal-300: #BAF2F4; --teal-400: #ADEFF2; --teal-500: #98EBEF; --teal-600: #8AD6D9; --teal-700: #6CA7AA; --teal-800: #548183; --teal-900: #406364; /* Teal — includes the CTA colour */ --cyan-50: #E6F5F3; --cyan-100: #D9EFED; --cyan-200: #B0DEDA; --cyan-300: #009688; --cyan-400: #00877A; --cyan-500: #00786D; --cyan-600: #007166; --cyan-700: #005A52; --cyan-800: #00443D; --cyan-900: #003530; /* Warm white */ --cream-50: #FFFEFE; --cream-100: #FFFDFB; --cream-200: #FFFCF9; --cream-300: #FFFAF6; --cream-400: #FFF9F5; --cream-500: #FFF8F2; --cream-600: #E8E2DC; --cream-700: #B5B0AC; --cream-800: #8C8885; --cream-900: #6B6866; /* Neutral grey */ --grey-50: #FDFDFD; --grey-100: #F9F9F9; --grey-200: #F7F7F7; --grey-300: #F3F3F3; --grey-400: #F1F1F1; --grey-500: #EDEDED; --grey-600: #D8D8D8; --grey-700: #A8A8A8; --grey-800: #2D2D2D; --grey-900: #222222; /* Standalone accents */ --accent-desert-sand: #E6D2B5; --accent-ice-blue: #ABEBF0; --accent-neon-red: #FF5252; --accent-soft-lavender: #E8B6F0; --accent-vivid-purple: #A52DDB; --neutral-black: #000000; --neutral-white: #FFFFFF; } /* ═══ LAYER 2 — ROLES (what components consume) ════════════════════════ Never put a raw hex in a component. Add a role here instead. */ :root { /* Adopted from the palette — deltas from the previous value in comments. All are 9 or under, which is imperceptible in normal use. */ --c-primary-dark: var(--primary-900); /* #15001B was #13001A Δ2 */ --c-primary-purple: var(--primary-600); /* #2E003B was #2C003E Δ4 */ --c-primary-light: var(--primary-400); /* #5B3367 was #5E376E Δ9 */ --c-accent-teal: var(--cyan-300); /* #009688 EXACT — the CTA colour */ --c-accent-cyan: var(--accent-ice-blue); /* #ABEBF0 EXACT */ --c-accent-sand: var(--accent-desert-sand); /* #E6D2B5 EXACT */ --c-neutral-cream: var(--cream-400); /* #FFF9F5 was #FEF9F4 Δ1 */ --c-neutral-gray: var(--grey-600); /* #D8D8D8 was #D7D7D7 Δ2 */ --c-neutral-darkgray: var(--grey-800); /* #2D2D2D was #323232 Δ9 */ --c-neutral-darkbg: var(--neutral-black); /* #000000 — the v2 footer is pure black */ --c-border: var(--cyan-900); /* #003530 was #013233 Δ4 */ /* New roles the v2 design needs, straight from the palette. */ --c-surface-1: var(--primary-700); /* #24002E section background */ --c-surface-2: var(--primary-800); /* #1C0024 section background */ --c-accent-band: var(--teal-400); /* #ADEFF2 full-width bands, logo mark */ --c-accent-highlight: var(--teal-500); /* #98EBEF emphasised words in headings */ --c-accent-pink: var(--accent-soft-lavender); /* #E8B6F0 hero sub-headline */ --c-text-on-dark: var(--cream-600); /* #E8E2DC footer legal text */ --c-border-subtle: var(--teal-200); /* #D0F6F8 secondary button outline */ /* ⚠️ NO PALETTE EQUIVALENT — held at the current value. These need a token from the designer, or a decision to drop them. */ --c-neutral-offblack: #0C1717; /* the PAGE BACKGROUND. Nearest token Δ25. */ --c-accent-mauve: #906E9F; /* body text on dark, footer tagline. Δ34. */ --c-accent-lavender: #C2A5CF; /* nearest --primary-100 Δ16 — visible, so held */ --c-neutral-lightgray: #A9B7BF; /* nearest --cream-700 Δ24 — visible, so held */ /* Composed roles */ --c-bg: var(--c-neutral-offblack); --c-bg-raised: var(--c-primary-dark); --c-text: var(--c-neutral-cream); --c-text-muted: var(--c-neutral-gray); --c-link-hover: var(--c-accent-cyan); --c-nav-bg: rgba(21, 0, 27, 0.72); /* --primary-900 at 72% */ --c-nav-bg-solid: var(--c-primary-dark); --c-nav-dropdown-bg: rgba(28, 0, 36, 0.98); /* --primary-800 at 98% */ } /* ═══ LAYER 3 — TYPE, SPACE, LAYOUT ═══════════════════════════════════ */ :root { /* CONFIRMED 2026-09-09 against v2/assets/textStyles.json — the designer's export of all 11 Figma text styles. Every size matches what was already here. The system is Galano Grotesque + Iosevka; POPPINS IS GONE, so no new font licence is needed. Two corrections applied in base.css: H4 and H5 are Regular 400, not Medium. Only H3 is Medium 500. */ --font-primary: 'Galano Grotesque', Inter, system-ui, -apple-system, sans-serif; --font-secondary: 'Iosevka', 'Space Mono', ui-monospace, monospace; /* FLUID between the two Figma frames — 402px and 1440px — so both endpoints land on her values. See docs/V2-BREAKPOINTS.md. */ --t-display-1: clamp(44px, 30px + 3.47vw, 80px); /* Display 80 lh 88 (1.1) ls -0.02em */ --t-h1: clamp(36px, 27px + 2.31vw, 60px); /* H1 60 lh 66 (1.1) ls -0.02em */ --t-h2: clamp(30px, 23px + 1.73vw, 48px); /* H2 48 lh 57.6 (1.2) */ --t-h3: clamp(24px, 21px + 0.77vw, 32px); /* H3 32 lh 38.4 (1.2) MEDIUM 500 */ --t-h4: clamp(22px, 21.2px + 0.19vw, 24px); /* H4 24 lh 28.8 (1.2) floor 22, not 20: keeps it distinct from H5 on mobile */ /* 20px and under do NOT scale. Body text is read at arm's length on every device; shrinking it hurts legibility and gains nothing. Mobile ladder is therefore 24 / 22 / 20 / 18 / 16 / 14 — every step distinct. */ --t-h5: 20px; /* H5 20 lh 24 (1.2) */ --t-p1: 18px; /* P1 18 lh 25.2 (1.4) */ --t-p2: 16px; /* P2 16 lh 22.4 (1.4) */ --t-p3: 14px; /* P3 14 lh 19.6 (1.4) — identical to Tag, see note */ --t-cta: 16px; /* CTA 16 lh 22.4 (1.4) Iosevka ls 0.04em UPPER */ /* Line-heights: seven read from the Figma node data, the other four (H1 H5 P1 P3) confirmed by the designer 2026-09-11. All 11 complete. P3 and Tag are byte-identical (Galano 400, 14px, 0 spacing); they can merge into one style unless they are meant to diverge later. */ --lh-tight: 1.1; /* Display 88/80 · H1 66/60 */ --lh-heading: 1.2; /* H2 57.6/48 · H3 38.4/32 · H4 28.8/24 · H5 24/20 */ --lh-body: 1.4; /* P1 25.2/18 · P2 22.4/16 · P3/Tag 19.6/14 · CTA 22.4/16 */ --ls-display: -0.02em; /* Figma "Display" only */ --ls-cta: 0.04em; /* Figma "CTA" only */ --fw-regular: 400; --fw-medium: 500; /* H3 uses this */ --fw-semibold: 600; --fw-bold: 700; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-15: clamp(32px, 21px + 2.70vw, 60px); /* section padding 402:32 1440:60 */ --space-16: 64px; --page-max: 1440px; --page-gutter: clamp(20px, 5px + 3.85vw, 60px); /* 402:20 1440:60 */ --measure: 68ch; --radius-card: 16px; --radius-pill: 30px; /* ── Gloss (PROPOSAL, branch gloss-proposal) ───────────────────── Light behaving on a surface. Three ingredients every raised surface gets: a 1px light along its top edge, a soft sheen over its upper part, and a colour glow it can throw when active. Type stays matte. */ --gloss-edge: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .25); --gloss-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, 0) 60%); --gloss-glow: 0 0 24px rgba(171, 235, 240, .22); --nav-height: 76px; /* mobile base: 44px hamburger + 2x16 padding */ --z-nav: 100; --z-mobile-menu: 200; --z-loader: 300; } /* ═══ BREAKPOINTS ══════════════════════════════════════════════════════ MOBILE-FIRST. The rules above are the mobile design; each block below ADDS for a wider screen. Nothing undoes anything. base < 768px mobile — single column, hamburger @media (min-width:768) 768-1023 tablet — derived by rule, not designed @media (min-width:1024) >= 1024 desktop — the 1440 design, full nav Use ONLY these two numbers, and ONLY min-width. v1 mixed max-767 with max-768 (and max-1023 with max-1024), so both rule sets fired in a one-pixel band — the reason it accumulated ten breakpoints. With min-width the number in the code IS the switch point, so that cannot happen. Type and spacing are fluid via clamp() and need no breakpoint at all. */ /* Tablet — 768 to 1023. Layout rules live in components.css and pages/*.css; no token changes are needed at this tier. */ @media (min-width: 1024px) { :root { --nav-height: 80px; /* desktop: 48px logo + 2x16 padding */ } }