/* leXpro Media — brand tokens.
   Generated from the leXpro Media Design System. Do not hand-edit:
   regenerate instead so the design system stays the single source of truth.

   Webfonts are served locally as WOFF2 — no external CDN, GDPR-safe. */

@font-face {
	font-family: "Como";
	src: url("../fonts/como-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Como";
	src: url("../fonts/como-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Como";
	src: url("../fonts/como-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Como";
	src: url("../fonts/como-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Dunbar Tall";
	src: url("../fonts/dunbartall-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Dunbar Tall";
	src: url("../fonts/dunbartall-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* leXpro Media — Color tokens
   Brand: metallic gold on near-black. Premium performance-agency palette. */

:root {
  /* ---------- Brand gold ---------- */
  --gold-50:  #faf4dd;
  --gold-100: #f3e7b8;
  --gold-200: #e9d488;
  --gold-300: #ddc05a;
  --gold-400: #d4af37;   /* core brand gold (sampled from logo) */
  --gold-500: #c79f29;
  --gold-600: #a8851f;
  --gold-700: #856819;
  --gold-800: #5f4a12;
  --gold-900: #3b2e0b;

  /* Gold sheen — used for metallic gradient fills on type / strokes */
  --gold-sheen-hi: #f4e3a1;
  --gold-sheen-mid: #d4af37;
  --gold-sheen-lo: #9c7c1e;

  /* ---------- Ink / neutrals (warm-black) ---------- */
  --ink-1000: #050505;   /* page black */
  --ink-950:  #0a0a0a;
  --ink-900:  #111111;   /* primary dark surface */
  --ink-850:  #161616;
  --ink-800:  #1c1c1c;   /* raised card on dark */
  --ink-700:  #262626;
  --ink-600:  #333333;   /* hairline borders on dark */
  --ink-500:  #4d4d4d;
  --ink-400:  #6b6b6b;
  --ink-300:  #909090;
  --ink-200:  #b8b8b8;
  --ink-100:  #d9d9d9;
  --ink-50:   #efefef;
  --paper:    #f6f5f1;   /* warm off-white light surface */
  --white:    #ffffff;

  /* ---------- Semantic ---------- */
  --success: #3fae6b;
  --warning: #e0a32e;
  --danger:  #d64545;
  --info:    #4a8fd6;

  /* ===================== SEMANTIC ALIASES ===================== */
  /* Default theme = DARK (the brand's native mode) */
  --bg-page:        var(--ink-1000);
  --bg-surface:     var(--ink-900);
  --bg-raised:      var(--ink-800);
  --bg-inset:       var(--ink-950);

  --text-primary:   var(--white);
  --text-secondary: var(--ink-200);
  --text-muted:     var(--ink-400);
  --text-on-gold:   var(--ink-1000);
  --text-accent:    var(--gold-400);

  --border-subtle:  var(--ink-700);
  --border-strong:  var(--ink-600);
  --border-gold:    var(--gold-400);

  --accent:         var(--gold-400);
  --accent-hover:   var(--gold-300);
  --accent-press:   var(--gold-500);

  --focus-ring:     var(--gold-300);
}

/* Light theme scope — warm paper with gold accents kept */
.theme-light {
  --bg-page:        var(--paper);
  --bg-surface:     var(--white);
  --bg-raised:      var(--white);
  --bg-inset:       #ecebe5;

  --text-primary:   var(--ink-1000);
  --text-secondary: var(--ink-700);
  --text-muted:     var(--ink-400);
  --text-on-gold:   var(--ink-1000);
  --text-accent:    var(--gold-700);

  --border-subtle:  #e0ded6;
  --border-strong:  #cfccc0;
  --border-gold:    var(--gold-500);

  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-400);
  --accent-press:   var(--gold-600);
  --focus-ring:     var(--gold-500);
}

/* leXpro Media — Typography tokens */

:root {
  /* ---------- Families ---------- */
  --font-display: "Dunbar Tall", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Como", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* ---------- Weights (Dunbar Tall) ---------- */
  --fw-hairline: 100; /* @kind other */
  --fw-extralight: 200; /* @kind other */
  --fw-light: 300; /* @kind other */
  --fw-book: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */
  --fw-ultra: 900; /* @kind other */

  /* ---------- Type scale (display = Dunbar Tall) ---------- */
  --fs-display-2xl: 6rem;     /* 96px hero */
  --fs-display-xl: 4.5rem;    /* 72px */
  --fs-display-lg: 3.25rem;   /* 52px */
  --fs-display-md: 2.5rem;    /* 40px */
  --fs-display-sm: 2rem;      /* 32px */
  --fs-h1: 2.25rem;           /* 36px */
  --fs-h2: 1.75rem;           /* 28px */
  --fs-h3: 1.375rem;          /* 22px */

  /* ---------- Type scale (text = Como) ---------- */
  --fs-lead: 1.25rem;         /* 20px intro paragraphs */
  --fs-body: 1rem;            /* 16px */
  --fs-body-sm: 0.875rem;     /* 14px */
  --fs-caption: 0.75rem;      /* 12px */
  --fs-overline: 0.6875rem;   /* 11px eyebrow */

  /* ---------- Line heights ---------- */
  --lh-tight: 0.95; /* @kind other */
  --lh-display: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-snug: 1.35; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* ---------- Letter spacing ---------- */
  --ls-display: -0.01em; /* @kind other */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0em; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-overline: 0.18em; /* @kind other */
}

/* leXpro Media — Spacing, radius, sizing tokens
   Base unit: 4px. */

:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---------- Radii (mostly squared-off, brand is geometric) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---------- Container widths ---------- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1140px;
  --container-xl: 1320px;

  /* ---------- Control sizing ---------- */
  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 54px;
}

/* leXpro Media — Elevation, shadow, glow, motion tokens */

:root {
  /* ---------- Shadows (dark-mode native: deep + soft) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);

  /* Gold glow — the signature accent for hover / focus on dark */
  --glow-gold-sm: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 4px 18px rgba(212, 175, 55, 0.18);
  --glow-gold-md: 0 0 0 1px rgba(212, 175, 55, 0.5), 0 8px 34px rgba(212, 175, 55, 0.28);
  --glow-gold-lg: 0 10px 60px rgba(212, 175, 55, 0.4);

  /* Inner hairline used on raised cards over dark */
  --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ---------- Gradients ---------- */
  --grad-gold: linear-gradient(135deg, var(--gold-sheen-hi) 0%, var(--gold-sheen-mid) 45%, var(--gold-sheen-lo) 100%);
  --grad-gold-soft: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  --grad-ink-fade: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.85) 70%, var(--ink-1000) 100%);
  --grad-spotlight: radial-gradient(120% 120% at 50% 0%, rgba(212,175,55,0.14) 0%, rgba(212,175,55,0) 55%); /* @kind other */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}