/* ============================================================= TOKENS — Single source of truth for all design variables All other CSS files import these via cascade (tokens loaded first in ) Never define raw values in component files — always use these tokens. ============================================================= */ :root { /* ----------------------------------------------------------- COLOURS — Backgrounds Source: extracted from Yeh Shehar cover art (CSMT, pre-dawn) Blue-grey blacks — not olive, not neutral ----------------------------------------------------------- */ --color-abyss: #080a0f; /* Section backgrounds — near-black with cool blue undertone */ --color-card: #111318; /* Card backgrounds — near-black, neutral, lets artwork breathe */ --color-card-border: #1a1c22; /* Card borders — near-invisible definition */ --color-void: #0e1018; /* Page base background */ --color-platform: #151922; /* Hero section background */ --color-deep-rail: #1e2535; /* Cards, section backgrounds */ --color-night-blue: #28334a; /* Hover states, lifted surfaces */ --color-slate: #2f3a50; /* Borders, dividers */ /* ----------------------------------------------------------- COLOURS — Text ----------------------------------------------------------- */ --color-bone: #e2e8ec; /* Primary headings */ --color-mist: #9db0bc; /* Body text, secondary text */ --color-signal: #5a6e80; /* Muted labels, captions */ /* ----------------------------------------------------------- COLOURS — Accents ----------------------------------------------------------- */ --color-chai: #d4a84b; /* Primary CTA, gold accent */ --color-dusk: #7eb3c8; /* Links, tags, secondary accent */ --color-rail-red: #c04a5a; /* Rare decorative accent — never CTAs */ --color-fluorescent: #e8d5b0; /* Script logotype, warm highlight text */ /* ----------------------------------------------------------- TYPOGRAPHY — Font families ----------------------------------------------------------- */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-condensed: 'Barlow Condensed', sans-serif; --font-hindi: 'Noto Sans Devanagari', sans-serif; /* ----------------------------------------------------------- TYPOGRAPHY — Type scale Base: 16px. Scale: ~1.25 minor third ----------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.5rem; /* 56px */ --text-display: 5rem; /* 80px */ /* ----------------------------------------------------------- TYPOGRAPHY — Weights ----------------------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* ----------------------------------------------------------- TYPOGRAPHY — Line heights ----------------------------------------------------------- */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ----------------------------------------------------------- TYPOGRAPHY — Letter spacing ----------------------------------------------------------- */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-widest: 0.15em; /* ----------------------------------------------------------- SPACING — Base unit: 4px --space-N = N × 4px ----------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ----------------------------------------------------------- TRANSITIONS ----------------------------------------------------------- */ --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* ----------------------------------------------------------- BREAKPOINTS — Reference values (use in @media queries) CSS custom properties cannot be used directly in @media, so these are documentation only. Actual breakpoints: mobile: < 640px tablet: 640px – 1023px desktop: ≥ 1024px ----------------------------------------------------------- */ --bp-mobile: 640px; --bp-tablet: 1024px; --bp-desktop: 1280px; /* ----------------------------------------------------------- Z-INDEX scale ----------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-overlay: 50; --z-nav: 100; --z-modal: 200; /* ----------------------------------------------------------- LAYOUT ----------------------------------------------------------- */ --container-max: 1200px; --container-gutter: var(--space-6); /* ----------------------------------------------------------- BORDER RADIUS ----------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; }