/* =================================================================
   HERO IT Design System — Colors & Type
   The IT company in Calgary that gives your business Superpowers.
   ================================================================= */

/* ---------- Fonts ----------
   Both families self-hosted with the FULL weight range (100–900) + italics.
   Inter uses the 18pt text-optimized optical size (its native UI cut).
   @font-face only fetches the weights/styles a page actually renders, so
   declaring the whole scale here is free at runtime — it just makes every
   step available to the system. JetBrains Mono ships as the mono face in a
   working subset (400/500/600/700, upright) for IDs/code/timers/numerics. */

/* ===== Urbanist — display / headings / brand ===== */
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Urbanist'; src: url('./fonts/Urbanist-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* ===== Inter (18pt optical) — body / UI / labels / tables ===== */
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fonts/Inter-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* ===== JetBrains Mono — IDs / SKUs / code / timers / phone #s / tabular columns.
   Utility face: only the weights the system actually sets are shipped
   (400/500/600/700, upright). Max JBM weight is 800; no italics needed here. ===== */
@font-face { font-family: 'JetBrains Mono'; src: url('./fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('./fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('./fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('./fonts/JetBrainsMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ============ FONT FAMILIES ============ */
  --font-display: 'Urbanist', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ============ COLORS — BRAND ============ */
  /* Hero Purple — the superhero identity. Use for CTAs, accents, brand moments. */
  --hero-purple-25:  #FAF6FE;   /* faintest purple wash — selected-card fills, AI summary bg */
  --hero-purple-50:  #F5F0FB;
  --hero-purple-100: #E9DCF5;
  --hero-purple-200: #D4B8EC;
  --hero-purple-300: #B888DD;
  --hero-purple-400: #9A5FCF;
  --hero-purple-500: #7A3CBE;   /* Primary purple — matches logo shield */
  --hero-purple-600: #6329A8;   /* Press / hover darker */
  --hero-purple-700: #4B1F82;   /* Deep purple, used on dark bg moments */
  --hero-purple-800: #341659;
  --hero-purple-900: #1E0C34;
  --hero-purple-950: #160A26;   /* near-black purple surface — popovers/sheets on dark */

  /* Navy — structural, trustworthy, from the website header/footer */
  --navy-50:  #E8ECF3;
  --navy-100: #C5D0E3;
  --navy-200: #8BA1C5;
  --navy-300: #5172A7;
  --navy-400: #2A4F8A;
  --navy-500: #0F1A2E;   /* Primary dark — hero bg, footer, headings on light */
  --navy-600: #0C1525;
  --navy-700: #09101C;
  --navy-800: #060A12;
  --navy-900: #030509;
  /* Dark gradient stops — sanctioned mids for the navy hero/panel gradients */
  --navy-grad-indigo: #1A1F4A;   /* navy → indigo mid */
  --navy-grad-violet: #2A1A52;   /* deep violet stop (navy→purple panels) */

  /* Electric Blue — supporting accent (legacy from website) */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;   /* light blue — pills/labels on dark surfaces */
  --blue-500: #2563EB;
  --blue-600: #1D4ED8;
  --blue-700: #1E40AF;
  --blue-grad-deep: #1A3A8C;   /* deep stop for visa/card glyph gradients */

  /* ============ COLORS — SURFACES ============ */
  --surface-white:   #FFFFFF;
  --surface-50:      #F8FAFC;   /* page bg */
  --surface-100:     #F1F5F9;   /* subtle card bg */
  --surface-200:     #E2E8F0;   /* borders, rails */
  --surface-300:     #CBD5E1;   /* stronger borders */
  --surface-400:     #94A3B8;

  /* ============ COLORS — SEMANTIC / CATEGORY ============ */
  /* One color per service pillar — used on cards, pills, icon bgs */
  --cat-web:     #2563EB;   /* blue   — Web & Digital */
  --cat-web-bg:  #EFF6FF;
  --cat-it:      #059669;   /* emerald — IT & Security */
  --cat-it-bg:   #ECFDF5;
  --cat-ai:      #7A3CBE;   /* hero purple — AI & Automation */
  --cat-ai-bg:   #F5F0FB;
  --cat-phone:   #D97706;   /* amber  — Communications */
  --cat-phone-bg:#FFFBEB;

  /* Status — full ramps (promoted from dashboard usage; --success/--warning/--danger
     remain as aliases to the 500/600 anchors for backward compatibility) */
  --success-50:  #ECFDF5;
  --success-100: #DCFCE7;
  --success-200: #A7F3D0;
  --success-300: #6EE7B7;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065F46;
  --success-900: #064E3B;
  --success:     #10B981;   /* alias → success-500 */
  --success-bg:  #ECFDF5;   /* alias → success-50 */

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-300: #FCD34D;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;
  --warning-800: #92400E;
  --warning-900: #78350F;
  --warning:     #F59E0B;   /* alias → warning-500 */
  --warning-bg:  #FFFBEB;   /* alias → warning-50 */

  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-200: #FECACA;
  --danger-300: #FCA5A5;
  --danger-400: #F87171;
  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;
  --danger-800: #991B1B;
  --danger-900: #7F1D1D;
  --danger:      #DC2626;   /* alias → danger-600 */
  --danger-bg:   #FEF2F2;   /* alias → danger-50 */

  /* ============ COLORS — FOREGROUND (semantic) ============ */
  --fg-1: #0F1A2E;   /* primary text: headlines, strong body */
  --fg-2: #334155;   /* body copy, paragraphs */
  --fg-3: #64748B;   /* secondary text, captions */
  --fg-4: #94A3B8;   /* meta, disabled */
  --fg-inverse: #FFFFFF;

  /* ============ COLORS — BACKGROUND (semantic) ============ */
  --bg-1: #FFFFFF;   /* card */
  --bg-2: #F8FAFC;   /* page */
  --bg-3: #F1F5F9;   /* muted section */
  --bg-dark: #0F1A2E; /* hero navy */
  --bg-brand: #7A3CBE; /* hero purple */

  /* =================================================================
     DASHBOARD / PSA SYSTEM EXTENSIONS
     Promoted from the HeroNet PSA app + Hero Voice / Account Center
     dashboards. These add the wider neutral + accent + status families
     the product UIs needed but the marketing-era DS never tokenized.
     Brand purple / navy / electric-blue / category colors above are
     unchanged and remain primary. Use these for data-dense product UI.
     ================================================================= */

  /* ---- NEUTRAL — extended slate ramp (structural greys for product UI).
     50–400 mirror --surface-*; 500–900 add the missing dark steps.
     The PSA app's Untitled-UI greys (#F2F4F7 #98A2B3 #475467 …) resolve
     to these within ΔE≈3 — use --gray-* as the single neutral scale. */
  --gray-25:  #FCFCFD;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* ---- SUCCESS — emerald (anchors on legacy --success #10B981).
     Already defined above as --success-50…900. PSA's UUI greens map here. */

  /* ---- WARNING — amber (anchors on legacy --warning #F59E0B).
     Defined above as --warning-50…900. */

  /* ---- GOLD / YELLOW — golden "warning pill" ramp used across PSA
     production screens (clients, schedule, tickets). Distinct from amber:
     more saturated, greener. */
  --gold-50:  #FEFCE8;
  --gold-100: #FEF9C3;
  --gold-200: #FEF08A;
  --gold-300: #FDE047;
  --gold-400: #FACC15;
  --gold-500: #EAB308;
  --gold-600: #CA8A04;
  --gold-700: #A16207;
  --gold-800: #854D0E;
  --gold-900: #713F12;

  /* ---- ORANGE — communications / phone & "in-progress" states */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-900: #7C2D12;

  /* ---- DANGER — red (anchors on legacy --danger #DC2626).
     Defined above as --danger-50…900. */

  /* ---- ROSE / PINK — escalations, SLA-breach, "people" accents */
  --rose-50:  #FFF1F2;
  --rose-100: #FFE4E6;
  --rose-200: #FECDD3;
  --rose-400: #FB7185;
  --rose-500: #F43F5E;
  --rose-600: #E11D48;
  --rose-700: #BE123C;
  --rose-800: #9F1239;
  --rose-900: #881337;
  --pink-500: #DB2777;
  --pink-700: #9D174D;

  /* ---- INFO / BLUE — informational pills & links inside product UI
     (Untitled-UI blue). Separate from brand --blue-* electric accent. */
  --info-25:  #F5FAFF;
  --info-50:  #EFF8FF;
  --info-100: #D1E9FF;
  --info-200: #B2DDFF;
  --info-300: #84CAFF;
  --info-400: #53B1FD;
  --info-500: #2E90FA;
  --info-600: #1570EF;
  --info-700: #175CD3;
  --info-800: #1849A9;
  --info-900: #194185;

  /* ---- INDIGO — secondary "AI/automation" accent on dashboards */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;
  --indigo-bright: #5B5BF1;

  /* ---- VIOLET — bright purple sibling to Hero Purple, used for
     Copilot / AI moments that need more pop than the brand 500. */
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;

  /* ---- TEAL / CYAN — backups, sync, "connected" states */
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-300: #5EEAD4;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;
  --cyan-50:  #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-300: #67E8F9;
  --cyan-700: #0E7490;
  /* ---- GREEN — bright confirm / online green (Tailwind green), distinct
     from the emerald --success status ramp. Used for live/positive accents. */
  --green-500: #22C55E;
  --green-600: #16A34A;

  /* ---- SOFT "ON-TINT" STATUS TEXT — muted, desaturated foreground
     colors for text/icons sitting on the pale -50/-100 tint chips that
     recur across PSA pills. Higher contrast & calmer than the ramp 700s. */
  --on-success: #1F6B3E;
  --on-warning: #6F4A0E;
  --on-danger:  #8B1F1F;
  --on-info:    #1F4D80;
  --on-info-2:  #2C6CB8;   /* lighter pill-blue variant (used widely on PSA chips) */

  /* ---- COPILOT DARK SURFACES — the near-black purple gradient stops for
     AI/Copilot modules (e.g. background-image: linear-gradient(135deg,
     var(--copilot-980) 0%, var(--copilot-950) 55%, var(--copilot-mid) 100%)). */
  --copilot-980: #04010A;
  --copilot-950: #0E041C;
  --copilot-mid: #18062E;
  --copilot-edge: #1F0A3A;   /* hairline border on Copilot modules */

  /* ---- CALENDAR CATEGORY PALETTE — muted earth-tones for the Schedule
     board's event categories. Decorative set, intentionally off-brand-neutral. */
  --cal-forest: #2C5A2C;
  --cal-sage:   #D9E7C8;
  --cal-olive:  #8A7A4A;
  --cal-olive-dk: #5A4D2C;
  --cal-clay:   #D8CFA9;
  --cal-sand:   #E2DABE;
  --cal-paper:  #F2EEE5;
  --cal-sky:    #A8C8DC;

  /* ============ BORDERS ============ */
  --border-subtle: #E2E8F0;
  --border-default: #CBD5E1;
  --border-strong: #94A3B8;
  --border-focus: #7A3CBE;

  /* ============ RADII ============ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* buttons, small cards */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 20px;   /* hero cards */
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* ============ SHADOWS ============ */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.06);
  --shadow-soft:       0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
  --shadow-nav:        0 1px 0 rgba(0,0,0,0.08);
  --shadow-purple-glow: 0 10px 30px -10px rgba(122,60,190,0.45);
  --shadow-brand-lift:  0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(122,60,190,0.12);

  /* ============ SPACING SCALE ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============ MOTION ============ */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-med:    250ms;
  --dur-slow:   400ms;

  /* ============ TYPE — ROLE TOKENS ============ */
  --type-display-size: 60px;
  --type-display-lh:   1.05;
  --type-display-weight: 800;
  --type-display-tracking: -0.02em;

  --type-h1-size: 44px;
  --type-h1-lh:   1.08;
  --type-h1-weight: 800;
  --type-h1-tracking: -0.02em;

  --type-h2-size: 32px;
  --type-h2-lh:   1.15;
  --type-h2-weight: 700;
  --type-h2-tracking: -0.015em;

  --type-h3-size: 22px;
  --type-h3-lh:   1.25;
  --type-h3-weight: 700;
  --type-h3-tracking: -0.01em;

  --type-h4-size: 18px;
  --type-h4-lh:   1.35;
  --type-h4-weight: 600;

  --type-eyebrow-size: 12px;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: 0.12em;   /* uppercase */

  --type-body-lg-size: 18px;
  --type-body-lg-lh:   1.6;

  --type-body-size: 16px;
  --type-body-lh:   1.6;

  --type-body-sm-size: 14px;
  --type-body-sm-lh:   1.5;

  --type-caption-size: 12px;
  --type-caption-lh:   1.4;
}

/* =====================================================
   Semantic classes — use these directly in UI code
   ===================================================== */

/* Base */
.ds-body {
  font-family: var(--font-body);
  color: var(--fg-2);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use Urbanist (display) */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--type-display-weight);
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-tracking);
  color: var(--fg-1);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--type-h1-weight);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-tracking);
  color: var(--fg-1);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-tracking);
  color: var(--fg-1);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--type-h3-weight);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-tracking);
  color: var(--fg-1);
}
.ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--type-h4-weight);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-lh);
  color: var(--fg-1);
}
.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--type-eyebrow-weight);
  font-size: var(--type-eyebrow-size);
  line-height: 1;
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-3);
}
.ds-body-lg {
  font-family: var(--font-body);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
  color: var(--fg-2);
}
.ds-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--fg-2);
}
.ds-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--fg-3);
}

/* Brand decorative: chrome / beveled HERO-style text (rare, headline moments) */
.ds-hero-chrome {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 50%, #6e6e6e 51%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(15,26,46,0.9);
  text-shadow: 2px 2px 0 rgba(15,26,46,0.25);
}

/* Gradient brand text (purple -> navy) */
.ds-gradient-text {
  background: linear-gradient(90deg, var(--hero-purple-500) 0%, var(--navy-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}