/* ============================================================ ALEX NARAYAN LAW — Foundations Color + Type tokens. Import this first in any artifact: Fonts: Cormorant Garamond (display serif) + Mulish (sans). Loaded from Google Fonts in each HTML — see fonts/README. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Marcellus&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); :root { /* ---------- BRAND PALETTE ---------- */ /* Navy — primary brand (the suit / the institution) */ --navy-950: #0a1422; --navy-900: #0f1d31; --navy-800: #15273f; /* PRIMARY brand navy */ --navy-700: #1d3251; --navy-600: #284268; --navy-500: #365383; /* Crimson — accent (the tie / the seal) */ --crimson-800: #5f111c; --crimson-700: #7a1623; --crimson-600: #8f1d2d; /* PRIMARY accent */ --crimson-500: #a52a3a; --crimson-400: #bd4452; /* Brass / Gold — secondary accent (scales, nameplate) */ --brass-700: #836129; --brass-600: #9a7536; --brass-500: #b08a46; /* PRIMARY gold */ --brass-400: #c6a35c; --brass-300: #d8bd84; /* Warm neutrals — stone, parchment, library */ --parchment: #faf7f0; /* lightest background */ --cream: #f4efe4; --stone-100: #ece6d8; --stone-200: #e1d9c7; --stone-300: #cfc4ad; --stone-400: #b1a587; --stone-500: #8a7f66; /* Ink — warm near-blacks for text */ --ink: #1a1d23; --ink-soft: #41454d; --ink-muted: #6b6f78; --ink-faint: #9a9ea6; /* Wood — deep accent for rich dark panels */ --wood-900: #1f140c; --wood-800: #2c1d11; /* ---------- SEMANTIC TOKENS ---------- */ --bg-base: var(--parchment); --bg-subtle: var(--cream); --bg-elevated: #ffffff; --bg-deep: var(--navy-900); /* dark hero / footer */ --bg-deepest: var(--navy-950); --fg1: var(--ink); /* primary text */ --fg2: var(--ink-soft); /* secondary text */ --fg3: var(--ink-muted); /* tertiary / captions */ --fg-on-dark: #f3efe6; --fg-on-dark-soft: #c3bdae; --fg-on-dark-muted: #8f8b7e; --primary: var(--navy-800); --primary-hover: var(--navy-700); --accent: var(--crimson-600); --accent-hover: var(--crimson-700); --gold: var(--brass-500); --line: rgba(21, 39, 63, 0.14); /* hairline borders on light */ --line-strong: rgba(21, 39, 63, 0.28); --line-gold: rgba(176, 138, 70, 0.45); --line-on-dark: rgba(243, 239, 230, 0.16); /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-nameplate: 'Marcellus', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Cormorant Garamond', Georgia, serif; /* ---------- TYPE SCALE (semantic) ---------- */ /* Display headlines use the serif; UI/body use the sans. */ --eyebrow-size: 0.78rem; --eyebrow-spacing: 0.22em; /* ---------- RADII ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---------- SHADOWS / ELEVATION ---------- */ --shadow-sm: 0 1px 2px rgba(15, 29, 49, 0.06), 0 1px 3px rgba(15, 29, 49, 0.08); --shadow-md: 0 4px 10px rgba(15, 29, 49, 0.07), 0 12px 24px rgba(15, 29, 49, 0.08); --shadow-lg: 0 18px 40px rgba(15, 29, 49, 0.13), 0 4px 12px rgba(15, 29, 49, 0.08); --shadow-gold: 0 8px 24px rgba(176, 138, 70, 0.22); /* ---------- SPACING (8pt base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms; } /* ============================================================ SEMANTIC ELEMENT STYLES Use these classes (or copy the rules) for consistent type. ============================================================ */ .eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-spacing); text-transform: uppercase; color: var(--accent); } .eyebrow--gold { color: var(--brass-600); } .eyebrow--ink { color: var(--ink-muted); } /* Decorative gold rule that often sits under an eyebrow */ .rule-gold { width: 44px; height: 2px; background: var(--brass-500); border: 0; } .display-1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--fg1); } .display-2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.005em; color: var(--fg1); } .h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1; color: var(--fg1); } .h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.16; color: var(--fg1); } .h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.18rem; line-height: 1.3; letter-spacing: 0.005em; color: var(--fg1); } .lede { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.5; color: var(--fg2); } .body { font-family: var(--font-sans); font-weight: 400; font-size: 1.0rem; line-height: 1.65; color: var(--fg2); } .body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 0.875rem; line-height: 1.6; color: var(--fg3); } .caption { font-family: var(--font-sans); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--fg3); } .quote { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.4; color: var(--fg1); } /* Wordmark lockup type */ .wordmark { font-family: var(--font-nameplate); font-weight: 400; letter-spacing: 0.04em; color: var(--navy-800); }