/* ============================================ DESIGN TOKENS — Sakirat Waraich Single source of truth for color, type, space, and motion values. Loaded on every page via the shared . Edit here to change the system globally. ============================================ */ :root { /* ───────────────────────────────────────── Color — Charcoal & Gold ───────────────────────────────────────── */ --ink: #161614; --ink-80: #38362E; --ink-60: #6E6A5E; --ink-20: #C4BEB0; --paper: #E8E4D8; --paper-dark:#DDD8CA; /* Legacy aliases — light defs. Dark overrides in [data-theme="dark"] below. Slated for retirement during component migration passes. */ --bg: #E8E4D8; --muted: var(--text-muted-strong); --warm-bg: #DDD8CA; --rule: #D6D2C6; /* Stronger hairline for abrupt section seams (.section-divider). One step darker than --rule so the 1px line reads as deliberate against --paper, not as paint dust. Remapped in dark via [data-theme="dark"] block below. */ --rule-strong: #C7C2B3; --white: #F4F2EC; --hero-bg: #2E1A12; /* Gold system — one bright brand gold, plus semantic aliases. --gold : the premium bright gold (header inspiration). --gold-hover : slightly deeper for hover. --gold-soft : faded gold for small accents. --gold-line : opacity-muted gold for decorative lines. --gold-smudge : gold used inside the divider-smudge SVG. Legacy tokens (--accent, --clay, --gold-bright) all alias to --gold so existing styles don't break. */ --gold: #D4A84A; --gold-hover: #C29634; --gold-soft: rgba(212, 168, 74, 0.55); --gold-line: rgba(212, 168, 74, 0.70); --gold-smudge: #D4A84A; /* Legacy aliases — every old usage keeps working and now uses the brighter gold automatically. */ --accent: var(--gold); --clay: var(--gold); --clay-dark: var(--gold-hover); --gold-bright: var(--gold); /* Dark sections */ --dark-bg: #161614; --dark-bg-card: rgba(244, 242, 236, 0.06); --dark-border: rgba(244, 242, 236, 0.14); --dark-muted: #BBB29A; --dark-body: #D9D3BE; /* Per-section dark-mode bg tones — rhythmic flow in dark mode. */ --section-hero-dark: #161614; --section-journey-dark: #1C1C1A; --section-speaking-dark: #161614; --section-voices-dark: #121210; --section-nila-dark: #1C1C1A; --section-pull-dark: #161614; --section-footer-dark: #0F0F0E; /* Footer — consistent maroon-brown site-wide (both themes) */ --footer-bg: #3A2A22; --footer-text: #F1ECDE; --footer-muted: rgba(241, 236, 222, 0.62); --footer-divider: var(--gold); /* ───────────────────────────────────────── Semantic text roles — fixed-contrast tokens that do NOT loosely inherit from nearby bg. Use these for important text. ───────────────────────────────────────── */ --text-heading: var(--ink); /* h1-h3 on light bgs */ --text-body-color: var(--ink-80); /* body copy */ --text-muted-strong: #575344; /* meta/eyebrow — AA on cream */ --text-on-dark: #F2EEDF; /* headings on dark bg */ --text-on-dark-body: var(--dark-body); /* body on dark bg */ --text-on-dark-mute: var(--dark-muted); /* meta on dark bg */ --text-btn-on-gold: #1A1712; /* button label on gold */ --text-numeral-light: rgba(22, 22, 20, 0.14); /* 01/02/… on cream */ --text-numeral-dark: rgba(232, 228, 216, 0.18); /* 01/02/… on dark */ /* Header surface — section-independent floating pill. Opaque by design; the translucent frosted-glass variant was retired in Session 3 L3-15 because section bleed-through broke contrast over dark sections in dark mode. Remapped per theme in [data-theme="dark"] so component rules stay theme-agnostic. */ --header-surface: #EEEADD; --header-border: rgba(22, 22, 20, 0.09); --header-shadow: var(--shadow-float); --header-hairline: rgba(22, 22, 20, 0.10); /* ───────────────────────────────────────── Font families — two typefaces only. CLAUDE.md: "Do not use more than two typefaces." ───────────────────────────────────────── */ --font-serif: 'Fraunces', serif; --font-sans: 'Inter Tight', sans-serif; /* ───────────────────────────────────────── Type scale (1.25 ratio, base 17px) ───────────────────────────────────────── */ --text-xs: 0.6875rem; /* 11px — fine print */ --text-meta: 0.75rem; /* 12px — nav, button, caption labels */ --text-s: 0.8125rem; /* 13px — captions, meta */ --text-m: 1rem; /* 16px — testimonial body, UI copy */ --text-body: 1.0625rem; /* 17px — base body */ --text-body-l: 1.25rem; /* 20px — hero intro, lead */ --text-display-s: 1.5rem; /* 24px — h3, topic titles */ --text-display-m: 2rem; /* 32px — section numbering */ --text-display-l: clamp(1.8rem, 3.5vw, 3rem); --text-display-xl:clamp(3.5rem, 7vw, 7rem); /* Line-height scale */ --lh-display: 0.95; /* h1, display lockups */ --lh-snug: 1.1; /* h2 */ --lh-heading: 1.3; /* h3 */ --lh-body: 1.65; /* long-form body */ --lh-relaxed: 1.7; /* default body */ --lh-loose: 1.8; /* .lead */ --lh-tight: 1; /* numerals, eyebrow blocks */ /* Letter-spacing / tracking */ --tracking-display: -0.02em; /* h1 */ --tracking-heading: 0.005em; /* h2 */ --tracking-body: -0.005em; /* paragraph */ --tracking-caps: 0.12em; /* buttons, meta, caption */ --tracking-caps-l: 0.18em; /* eyebrow */ /* Content measures — max-widths for readable line length */ --measure-s: 540px; /* meta blocks, short columns */ --measure-m: 680px; /* body paragraphs */ --measure-l: 720px; /* .lead, wider intro copy */ --measure-xl: 860px; /* statement / pull quote */ --container-max: 1280px; /* page max width */ --container-narrow: 800px; /* ───────────────────────────────────────── Space scale (8px base) ───────────────────────────────────────── */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 5rem; --space-4xl: 6rem; --space-5xl: 8rem; --space-6xl: 10rem; --space-7xl: 12rem; /* Section rhythm — tightened again in L3-CRB-1 after content rewrite left the prior 4/6.5/8rem cut feeling loose. First attempt at 3/4.5/5.5rem (-30%) overshot — collided with diagonal-divider shapes at 1280 in three places (index speaking "See all topics", testimonials bottom row, nila preview "EXPLORE NILA"). Landed at the pre-stated revert target. Diagonal dividers already create separation, so padding doesn't need to do double duty. --divider-gap* deliberately untouched (L3-13 mobile-overlap guard). */ --section-py: 3.5rem; /* was 4rem (was 6rem) */ --section-py-md: 5.5rem; /* was 6.5rem (was 10rem) */ --section-py-lg: 6.5rem; /* was 8rem (was 12rem) */ /* Extra bottom padding a section needs when it has a diagonal divider, so content doesn't collide with the clip-path shape. Dialed down from 50/70/90 → 24/40/56 to kill the empty gap. Mobile lifted from 24px → 48px in L3-13 to eliminate content/divider-polygon overlaps at 375px. Mobile-only effect (--divider-gap-md overrides at 768+). */ --divider-gap: 48px; --divider-gap-md: 40px; --divider-gap-lg: 56px; /* Distance between a section-intro block (eyebrow + h2) and the content that follows. Previously ad-hoc per page. */ --section-intro-gap: var(--space-l); --section-intro-gap-md: var(--space-xl); /* ───────────────────────────────────────── Radii — editorial, mostly flat. Rectangles are not rounded by default; radius is reserved for specific components (floating pill, mobile hero image, avatars). ───────────────────────────────────────── */ --radius-0: 0; --radius-card: 12px; /* topic tiles, event cards (per Speaking redesign ref) */ --radius-image: 24px; /* mobile hero image only */ --radius-pill: 100px; /* floating header pill */ --radius-circle: 50%; /* avatars, dot markers */ /* ───────────────────────────────────────── Elevation / shadows — floating header uses `--shadow-float`. Topic tiles + event cards use `--shadow-card` for subtle lift per the Speaking redesign reference. ───────────────────────────────────────── */ --shadow-float: 0 6px 40px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05); --shadow-float-strong: 0 6px 40px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.20); --shadow-float-dark: 0 6px 40px rgba(0, 0, 0, 0.30), 0 1px 4px rgba(0, 0, 0, 0.20); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-card-dark: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.20); /* ───────────────────────────────────────── Breakpoints — mobile-first. Media queries use min-width unless a mobile-only override is needed (then max-width: calc(bp - 1px)). ───────────────────────────────────────── */ --bp-md: 768px; /* tablet */ --bp-lg: 1024px; /* desktop */ --bp-xl: 1280px; /* wide */ /* ───────────────────────────────────────── Z-index layers ───────────────────────────────────────── */ --z-base: 1; --z-raised: 3; --z-header: 100; /* ───────────────────────────────────────── Motion: durations ───────────────────────────────────────── */ --dur-fast: 0.2s; --dur-normal: 0.4s; --dur-slow: 0.8s; --dur-slower: 1.2s; --dur-slowest: 1.8s; /* Motion: easings */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Reduced motion: collapse all durations */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0s; --dur-normal: 0s; --dur-slow: 0s; --dur-slower: 0s; --dur-slowest: 0s; } } /* Dark-mode token overrides. Swap light palette to dark. */ [data-theme="dark"] { --bg: #161614; --ink: #E8E4D8; --muted: #BDB59A; /* was #A09878 — bumped for AA body/eyebrow contrast on dark */ --rule: rgba(232, 228, 216, 0.22); /* was 0.12 — separators + timeline need visible presence */ --rule-strong: rgba(232, 228, 216, 0.32); --white: #1E1E1C; --warm-bg: #1C1C1A; --hero-bg: #161614; --dark-bg: #0E0E0C; --dark-bg-card: rgba(232, 228, 216, 0.05); --dark-border: rgba(232, 228, 216, 0.18); /* was 0.10 — card borders readable */ --dark-muted: #A89E7E; /* was #8A8268 */ --dark-body: #D6CFB9; /* was #C4BEA8 — body copy >4.5:1 against dark */ --paper-dark: #1C1C1A; --ink-80: #D2CCB8; --ink-60: #BDB59A; /* body-ish muted, same bump as --muted */ --ink-20: #48463C; /* structural lines (timeline) — was #2E2C24, nearly invisible */ --text-heading: var(--text-on-dark); --text-body-color: var(--dark-body); --text-muted-strong: #BFB79F; --text-btn-on-gold: #1A1712; --text-numeral-light: rgba(232, 228, 216, 0.18); --header-surface: #26241F; --header-border: rgba(232, 228, 216, 0.14); --header-shadow: var(--shadow-float-dark); --header-hairline: rgba(232, 228, 216, 0.12); --shadow-card: var(--shadow-card-dark); }