/* LeaderFactor — Colors & Type  ·  v2.0 (2026-05-29)
   Canonical implementation of marketing/design-system/README.md (v2.0).
   Two typefaces only: Fustat (sans, self-hosted) + Spectral italic (serif accent).
   See RECONCILIATION.md for migration notes and outstanding asset work.
   -------------------------------------------------------------- */

/* Self-hosted Fustat (brand-licensed). Spectral italic from Google Fonts. */
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('fonts/Fustat-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Fustat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Fustat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Fustat-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Fustat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Fustat-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/Fustat-ExtraBold.ttf') format('truetype'); }
/* Variable axis (preferred when browser supports it) */
@font-face { font-family: 'Fustat'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/Fustat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Fustat-VariableFont_wght.ttf') format('truetype'); }

/* Spectral — italic only (the sole reserved accent face). See RECONCILIATION.md re: self-hosting. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@1,300;1,400;1,500&display=swap');

:root {
  /* ===========================================================
     PRIMARY PALETTE (README §Color palette → Primary)
     =========================================================== */
  --lf-dark:      #101322;   /* primary dark surface, body text on light, "black" */
  --lf-navy:      #081238;   /* gradient floor, deep backgrounds */
  --lf-midnight:  #02071C;   /* glass tint base */

  --lf-md-90: #353949;       /* dark elevated surfaces */
  --lf-md-70: #4E5160;       /* body copy on light */
  --lf-md-50: #80838D;       /* faded / secondary text */
  --lf-md-30: #B3B5BB;       /* dividers, disabled */
  --lf-md-10: #E6E6E8;       /* light dividers on cream */

  --lf-cream:   #FFFEF8;     /* page background (light mode) */
  --lf-sand-10: #F7F3EA;     /* lightest beige, card bg on cream */
  --lf-sand-30: #E7DDCE;     /* card backgrounds on cream */
  --lf-sand-50: #D7C7B1;     /* mid sand */
  --lf-sand-70: #C7B095;     /* warm accent (a.k.a. Sand Bright) */
  --lf-sand:    #AF8F6B;     /* signature warm tone; AI Leadership default */
  --lf-sand-120:#7F5D37;     /* sand shade */
  --lf-sand-150:#543615;     /* deepest sand */
  --lf-white:   #FFFFFF;

  /* ===========================================================
     ACCENT — brand-centric only (never with a solution color)
     =========================================================== */
  --lf-plum:        #802B64;
  --lf-plum-bright: #A43178;
  --lf-plum-30:     #CFA4BF;
  --lf-accent-blue:        #066DB1;
  --lf-accent-blue-bright: #0C81CF;
  --lf-accent-blue-30:     #99C6E3;

  /* ===========================================================
     SOLUTION SCALES (README §Solution colors)
     <code>: default / bright / tint-30 / shade-120 / deep-150
     =========================================================== */
  --c-ps:     #2A77EA;  --c-ps-bright:  #0268FF;  --c-ps-30:  #B4CCF0;  --c-ps-120:  #225BB0;  --c-ps-150:  #072F6A;
  --c-eq:     #659940;  --c-eq-bright:  #62AE2C;  --c-eq-30:  #CBE2BB;  --c-eq-120:  #4E7333;  --c-eq-150:  #2F4D1A;
  --c-cam:    #F04624;  --c-cam-bright: #FF4823;  --c-cam-30: #FEB1A1;  --c-cam-120: #D84022;  --c-cam-150: #902A16;
  --c-epic:   #43A9C2;  --c-epic-bright:#30C3E8;  --c-epic-30:#BAE5F0;  --c-epic-120:#347E91;  --c-epic-150:#104957;
  --c-dm:     #6B49DB;  --c-dm-bright:  #774EFF;  --c-dm-30:  #C9BAFB;  --c-dm-120:  #5B3DBE;  --c-dm-150:  #3E2B7D;
  --c-ltai:   #AF8F6B;  --c-ltai-bright:#C7B095;  --c-ltai-30:#E7DDCE;  --c-ltai-120:#7F5D37;  --c-ltai-150:#543615;
  --c-tp:     #B2C600;  --c-tp-bright:  #C8D92B;  --c-tp-30:  #DEE69B;  --c-tp-120:  #94A500;  --c-tp-150:  #5B6500;

  /* Active solution slot — defaults to PS; remapped by .is-* below. */
  --solution:        var(--c-ps);
  --solution-bright: var(--c-ps-bright);
  --solution-30:     var(--c-ps-30);
  --solution-120:    var(--c-ps-120);
  --solution-150:    var(--c-ps-150);

  /* ===========================================================
     GLASS & TRANSPARENCY (always pair with backdrop-filter blur)
     =========================================================== */
  --glass-dark:        rgba(2, 7, 28, 0.25);
  --glass-dark-strong: rgba(2, 7, 28, 0.50);
  --glass-light:       rgba(255, 255, 255, 0.15);
  --blur-glass:   12px;
  --blur-navbar:  28px;
  --blur-overlay: 64px;

  /* Text on dark surfaces */
  --fg-on-dark:        #FFFFFF;
  --fg-on-dark-body:   rgba(255, 255, 255, 0.70);
  --fg-on-dark-subtle: rgba(255, 255, 255, 0.50);
  --fg-on-dark-faint:  rgba(255, 255, 255, 0.30);

  /* Borders & lines */
  --hairline-dark: rgba(255, 255, 255, 0.10);
  --line-dark:     rgba(255, 255, 255, 0.15);
  --divider-light: #E6E6E8;
  --deck-divider:  #4E5160;   /* used as `1px dashed var(--deck-divider)` */

  /* ===========================================================
     TYPOGRAPHY
     =========================================================== */
  --font-sans:  'Fustat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;

  /* Type ladder (README §Type scale) — size / line-height / letter-spacing */
  --fs-display: 158px; --lh-display: 1.06; --ls-display: -0.04em;
  --fs-h1: 64px; --lh-h1: 1.1;
  --fs-h2: 40px; --lh-h2: 1.2;
  --fs-h3: 32px; --lh-h3: 1.2;
  --fs-h4: 20px; --lh-h4: 1.0;  --ls-h4: 0.01em;
  --fs-h5: 18px; --lh-h5: 1.35;
  --fs-p1: 20px; --lh-p1: 1.35;
  --fs-lead: 25px; --lh-lead: 1.1;
  --fs-step: 28px; --ls-serif: -0.02em;
  --fs-p2: 16px; --lh-p2: 1.4;
  --fs-p3: 13px; --lh-p3: 1.4;

  /* ===========================================================
     SPACING (README §Layout and spacing)
     =========================================================== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 24px;
  --space-6: 36px;  --space-7: 48px;  --space-8: 72px;  --space-9: 96px;  --space-10: 144px;

  --max-width: 1200px;
  --gutter: 150px;
  --section-pad: 96px;

  /* ===========================================================
     RADII (README §Corner radii)
     =========================================================== */
  --radius-pill:    2000px;  /* buttons — always fully pill */
  --radius-card:    16px;
  --radius-hero:    10px;    /* hero inset canvas / large containers */
  --radius-navbar:  0 0 5px 5px;
  --radius-chip:    5px;     /* dropdowns, chips */

  /* ===========================================================
     SHADOWS — LeaderFactor uses almost none. Cards are flat.
     =========================================================== */
  --shadow-float: 0 30px 80px -40px rgba(2, 7, 28, 0.35);  /* floating cards over hero only */

  /* ===========================================================
     MOTION — 0.18s ease only (opacity / transform / background-color)
     =========================================================== */
  --transition: 0.18s ease;

  /* ===========================================================
     SEMANTIC TOKENS — light (default). Remapped under [data-theme="dark"].
     =========================================================== */
  --bg:          var(--lf-cream);
  --bg-elevated: var(--lf-white);
  --bg-sunken:   var(--lf-sand-10);
  --fg:          var(--lf-dark);
  --fg-muted:    var(--lf-md-70);
  --fg-subtle:   #6A6D78;
  --fg-faint:    var(--lf-md-30);
  --border:      var(--divider-light);
  --line:        var(--lf-md-10);
}

/* Dark mode — README §Dark mode */
[data-theme="dark"] {
  --bg:          #101322;
  --bg-elevated: #1B2032;
  --bg-sunken:   #02071C;
  --fg:          #FFFFFF;
  --fg-muted:    rgba(255, 255, 255, 0.70);
  --fg-subtle:   rgba(255, 255, 255, 0.50);
  --fg-faint:    rgba(255, 255, 255, 0.30);
  --border:      rgba(255, 255, 255, 0.10);
  --line:        rgba(255, 255, 255, 0.15);
}

/* Solution scope — README §The two modes. Add class on the root subtree. */
.is-ps   { --solution: var(--c-ps);   --solution-bright: var(--c-ps-bright);   --solution-30: var(--c-ps-30);   --solution-120: var(--c-ps-120);   --solution-150: var(--c-ps-150); }
.is-eq   { --solution: var(--c-eq);   --solution-bright: var(--c-eq-bright);   --solution-30: var(--c-eq-30);   --solution-120: var(--c-eq-120);   --solution-150: var(--c-eq-150); }
.is-cam  { --solution: var(--c-cam);  --solution-bright: var(--c-cam-bright);  --solution-30: var(--c-cam-30);  --solution-120: var(--c-cam-120);  --solution-150: var(--c-cam-150); }
.is-epic { --solution: var(--c-epic); --solution-bright: var(--c-epic-bright); --solution-30: var(--c-epic-30); --solution-120: var(--c-epic-120); --solution-150: var(--c-epic-150); }
.is-dm   { --solution: var(--c-dm);   --solution-bright: var(--c-dm-bright);   --solution-30: var(--c-dm-30);   --solution-120: var(--c-dm-120);   --solution-150: var(--c-dm-150); }
.is-ltai { --solution: var(--c-ltai); --solution-bright: var(--c-ltai-bright); --solution-30: var(--c-ltai-30); --solution-120: var(--c-ltai-120); --solution-150: var(--c-ltai-150); }
.is-tp   { --solution: var(--c-tp);   --solution-bright: var(--c-tp-bright);   --solution-30: var(--c-tp-30);   --solution-120: var(--c-tp-120);   --solution-150: var(--c-tp-150); }

/* =============================================================
   BASE ELEMENTS
   ============================================================= */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-p2);
  line-height: var(--lh-p2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================
   TYPOGRAPHY UTILITIES (README §Type scale)
   ============================================================= */
.lf-display {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-wrap: balance;
}
.lf-h1 { font: 400 var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: 0; margin: 0; text-wrap: balance; }
.lf-h2 { font: 400 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: 0; margin: 0; text-wrap: balance; }
.lf-h3 { font: 400 var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: 0; margin: 0; }
.lf-h4 { font: 700 var(--fs-h4)/var(--lh-h4) var(--font-sans); letter-spacing: var(--ls-h4); margin: 0; }
.lf-h5 { font: 500 var(--fs-h5)/var(--lh-h5) var(--font-sans); letter-spacing: 0; margin: 0; }

.lf-p1   { font: 400 var(--fs-p1)/var(--lh-p1) var(--font-sans); }
.lf-lead { font: 500 var(--fs-lead)/var(--lh-lead) var(--font-sans); }
.lf-p2   { font: 400 var(--fs-p2)/var(--lh-p2) var(--font-sans); }
.lf-p3   { font: 400 var(--fs-p3)/var(--lh-p3) var(--font-sans); }

/* Spectral italic accent — one feature word inside a heading, numerals, step labels */
.lf-accent, .lf-numeral {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: var(--ls-serif);
}
.lf-step-label {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-step); letter-spacing: var(--ls-serif);
}

/* Dot-title — all-caps overline with a square bullet */
.lf-dot-title {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1.2 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.1em; color: currentColor;
}
.lf-dot-title::before {
  content: ""; width: 7px; height: 7px; border-radius: 0;
  background: currentColor; flex: 0 0 auto;
}

/* =============================================================
   BUTTONS (README §Buttons) — always fully pill, 0.18s ease
   ============================================================= */
.lf-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 28px;
  font: 500 var(--fs-p3)/1 var(--font-sans);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  background: rgba(2, 7, 28, 0.12);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.lf-button:hover  { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.22); }
.lf-button:active { background: #FFFFFF; color: var(--lf-dark); transform: translateY(1px); }

.lf-button--on-light {
  background: rgba(16, 19, 34, 0.05);
  border-color: rgba(16, 19, 34, 0.08);
  color: var(--lf-dark);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lf-button--on-light:hover  { background: rgba(16, 19, 34, 0.12); border-color: rgba(16, 19, 34, 0.12); }
.lf-button--on-light:active { background: var(--lf-dark); color: #FFFFFF; }

.lf-button--solid {
  background: var(--lf-dark);
  border-color: transparent; color: #FFFFFF;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lf-button--solid:hover  { background: #1B2032; }
.lf-button--solid:active { background: #FFFFFF; color: var(--lf-dark); }

/* =============================================================
   ARROW LINK (README §Arrow link) — underline on hover only
   ============================================================= */
.lf-arrow-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: currentColor; text-decoration: none; cursor: pointer;
}
.lf-arrow-link:hover { text-decoration: underline; }
.lf-arrow-link svg { width: 18px; height: 18px; }

/* =============================================================
   CARDS — flat, 16px radius, no drop shadow
   ============================================================= */
.lf-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.lf-card--float { box-shadow: var(--shadow-float); }

/* =============================================================
   BACKGROUND UTILITIES (README §Backgrounds)
   ============================================================= */
.lf-bg-light { background: var(--lf-cream); }
.lf-bg-dark  { background: var(--lf-dark); }

/* Page-top gradient behind the hero: navy → sand → cream */
.lf-bg-pagetop {
  background: linear-gradient(180deg, var(--lf-navy) 0%, var(--lf-sand) 55%, var(--lf-cream) 100%);
}

/* Hero scrim — sits over the landscape photo */
.lf-hero-scrim { background: rgba(16, 19, 34, 0.51); }

/* Dot-grid + noise overlays */
.lf-bg-dotgrid {
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}
.lf-bg-noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('assets/imagery/noise.png') repeat;
  opacity: 0.25; mix-blend-mode: overlay;
}

/* =============================================================
   LEGACY COMPATIBILITY LAYER  (deprecated — pending consumer migration)
   The slides/, ui_kits/, and some preview/ files still reference the v1
   token and class names. These aliases keep them rendering until they are
   migrated to the v2.0 .lf-* / --space-* / --c-* system (see RECONCILIATION.md).
   DO NOT author new work against these names.
   ============================================================= */
:root {
  --lf-midnight-dark: var(--lf-midnight);
  --lf-sand-light: var(--lf-sand-30);
  --lf-blue: var(--c-ps-bright);
  --lf-blue-deep: #033180;
  --lf-magenta: var(--lf-plum);
  --lf-magenta-mid: var(--lf-plum-bright);
  --font-mono: 'DM Mono', 'SF Mono', Menlo, monospace;

  /* v1 spacing scale — original pixel values preserved for layout stability */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* v1 radius names → nearest v2.0 equivalents */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: var(--radius-card); --radius-xl: 24px;

  --shadow-md: var(--shadow-float);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 240ms; --dur-fast: 150ms;
}
/* v1 type/element classes kept as thin shims onto the v2.0 ladder */
.display { font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.h1, h1 { font: 400 var(--fs-h1)/var(--lh-h1) var(--font-sans); margin: 0; }
.h2, h2 { font: 400 var(--fs-h2)/var(--lh-h2) var(--font-sans); margin: 0; }
.h3, h3 { font: 400 var(--fs-h3)/var(--lh-h3) var(--font-sans); margin: 0; }
.h4, h4 { font: 700 var(--fs-h4)/var(--lh-h4) var(--font-sans); margin: 0; }
.h5, h5 { font: 500 var(--fs-h5)/var(--lh-h5) var(--font-sans); margin: 0; }
.body   { font: 400 var(--fs-p2)/var(--lh-p2) var(--font-sans); color: var(--fg-muted); }
.btn    { /* alias of .lf-button */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 28px; font: 500 var(--fs-p3)/1 var(--font-sans);
  color: #FFFFFF; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-pill);
  background: rgba(2,7,28,0.12); backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%); cursor: pointer; transition: var(--transition); }