/* ============================================================
   Focus Institute — Colors & Type
   Standalone CSS tokens for HTML artifacts, slides, and mocks.
   Distilled from src/app/globals.css and docs/design-system.md.
   ============================================================ */

/* Inter is the canonical brand font (variable, 100–900 weight,
   optical-size axis 14–32). Loaded from the local file the brand
   team shipped — no Google Fonts dependency, no fallback drift.
   Montserrat is kept available via Google Fonts as the live-site
   compatibility font; see README “Open questions”. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- COLORS — roles, not vibes ---- */

  /* Brand */
  --fi-brand:              #B41E2D;  /* Editorial Red — CTAs, accents, underlines */
  --fi-brand-dark:         #8F1722;  /* Hover */
  --fi-brand-on-dark:      #FF8A94;  /* AA-compliant accent border on dark bg */

  /* Surfaces */
  --fi-surface:            #FFFFFF;  /* paper */
  --fi-surface-light:      #F4F4F4;  /* zebra alt */
  --fi-surface-dark:       #485666;  /* slate, primary dark section */
  --fi-surface-darker:     #1A2B3B;  /* deep navy, high contrast */
  --fi-surface-inverse-tint: rgba(255,255,255,0.04);  /* cards on dark */
  --fi-surface-brand-tint:   rgba(180,30,45,0.04);    /* table highlight */

  /* Borders */
  --fi-border:             #E8ECF0;
  --fi-border-soft:        #F0F3F6;
  --fi-border-dark:        rgba(153,170,186,0.2);

  /* Text — roles per brand brief.
     Primary = headlines; Body = body text on paper (Tinte);
     Secondary = lead / secondary; Muted = labels/meta. */
  --fi-text-primary:       #1A2B3B;   /* Headlines, H1–H3 */
  --fi-text-body:          #0E1821;   /* Body text on paper (Tinte) */
  --fi-text-secondary:     #485666;   /* Lead, secondary text (Slate) */
  --fi-text-muted:         #5E6F80;   /* Meta, labels — AA safe */
  --fi-text-muted-soft:    #99AABA;   /* Decorative only — NEVER for body */
  --fi-text-inverse:       #FFFFFF;   /* Headlines on dark */
  --fi-text-inverse-body:  #D5DDE5;   /* Body/lead on dark */
  --fi-text-inverse-muted: #C5CFDA;   /* Meta on dark */

  /* Quick semantic aliases for consumer files */
  --fg:                    var(--fi-text-primary);
  --fg-body:               var(--fi-text-body);
  --fg-secondary:          var(--fi-text-secondary);
  --fg-muted:              var(--fi-text-muted);
  --fg-inverse:            var(--fi-text-inverse);
  --bg:                    var(--fi-surface);
  --bg-alt:                var(--fi-surface-light);
  --bg-dark:               var(--fi-surface-dark);
  --bg-darker:             var(--fi-surface-darker);
  --accent:                var(--fi-brand);

  /* ---- FONTS ---- */
  /* Canonical brand font (headlines + UI). Inter is the brief's
     specified family; it now ships locally as a variable font. */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* Montserrat retained for parity with the live site if a mocked
     screen needs to match production exactly. */
  --font-montserrat: 'Montserrat', system-ui, -apple-system, Arial, sans-serif;

  /* ---- TYPE SCALE — fluid clamps, mirror globals.css ---- */
  --fs-kicker:   0.8125rem;                          /* 13px */
  --fs-body:     clamp(1rem, 1.15vw, 1.125rem);      /* 16–18 */
  --fs-lead:     clamp(1.1875rem, 1.8vw, 1.4375rem); /* 19–23 */
  --fs-subline:  clamp(1.25rem, 2.2vw, 1.5rem);      /* 20–24 */
  --fs-h3:       clamp(1.5rem, 2.4vw, 1.875rem);     /* 24–30 */
  --fs-h2:       clamp(1.75rem, 3.6vw, 2.625rem);    /* 28–42 */
  --fs-h1:       clamp(2.25rem, 5vw, 4.25rem);       /* 36–68 */

  --lh-h1: 1.05;  --lh-h2: 1.15;  --lh-h3: 1.25;
  --lh-subline: 1.4;  --lh-lead: 1.5;  --lh-body: 1.7;

  --ls-kicker: 0.14em;
  /* Inter reads tighter than Montserrat at display sizes —
     pull the H1 a touch more negative for an editorial feel. */
  --ls-h1:    -0.025em;
  --ls-h2:    -0.015em;
  --ls-h3:    -0.01em;

  /* ---- MEASURES — line length caps ---- */
  --measure-h1:    22ch;
  --measure-h2:    26ch;
  --measure-h3:    30ch;
  --measure-lead:  60ch;
  --measure-body:  68ch;

  /* ---- CONTAINERS ---- */
  --container-text:    720px;
  --container-default: 1100px;
  --container-wide:    1360px;
  --container-full:    1440px;

  /* ---- SPACING — 8-based ---- */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;
  --space-20: 160px;

  /* ---- SECTION PADDING ---- */
  --section-py-sm: clamp(48px, 6vw, 64px);
  --section-py-md: clamp(64px, 8vw, 96px);
  --section-py-lg: clamp(80px, 10vw, 120px);
  --section-px:    clamp(16px, 4vw, 24px);

  /* ---- RADIUS ---- */
  --radius-sm: 4px;   /* buttons, inputs */
  --radius-md: 6px;
  --radius-lg: 8px;   /* cards */
  --radius-xl: 12px;  /* special panels */

  /* ---- BUTTONS ---- */
  --btn-h-md: 46px;
  --btn-h-lg: 56px;
  --btn-px-md: 26px;
  --btn-px-lg: 40px;
  --btn-fs-md: 15px;
  --btn-fs-lg: 16px;
  --btn-weight: 700;
  --btn-gap: 10px;
  --btn-focus-ring: 0 0 0 3px rgba(180,30,45,0.28);

  /* ---- SHADOWS — sparing, editorial ---- */
  --shadow-card: 0 4px 16px rgba(0,0,0,0.07);
  --shadow-raised: 0 8px 32px rgba(0,0,0,0.10);
}

/* ============================================================
   BASE TYPE
   ============================================================ */
body {
  font-family: var(--font-sans);
  /* Enable Inter's optical-size axis so large headlines use the
     display cut and small text uses the text cut. */
  font-optical-sizing: auto;
  color: var(--fg-body);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--fi-brand); color: #fff; }

/* Semantic elements — match @layer base in globals.css */
h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  font-family: var(--font-sans);
  margin: 0;
  font-weight: 700;
  letter-spacing: normal;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: 1.125rem; line-height: 1.3; }

p { margin: 0; }

/* ============================================================
   UTILITY CLASSES — for hand-written HTML artifacts
   ============================================================ */
.fi-kicker {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fi-brand);
}
.fi-kicker--plain   { color: var(--fi-text-secondary); }
.fi-kicker--on-dark { color: var(--fi-text-inverse-muted); }

.fi-eyebrow-line {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; font-weight: 500;
  color: var(--fi-text-secondary);
}
.fi-eyebrow-line::before {
  content: ''; display: block;
  width: 32px; height: 3px; background: var(--fi-brand);
}

.fi-lead     { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--fg-secondary); }
.fi-subline  { font-size: var(--fs-subline); line-height: var(--lh-subline); font-weight: 500; color: var(--fg-secondary); }
.fi-body     { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-body); }

.fi-statement {
  border-left: 3px solid var(--fi-brand);
  padding-left: 24px;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: var(--measure-lead);
}

/* Buttons */
.fi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  gap: var(--btn-gap);
  height: var(--btn-h-md); padding: 0 var(--btn-px-md);
  font-size: var(--btn-fs-md); font-weight: var(--btn-weight);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  line-height: 1; white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 120ms ease;
}
.fi-btn:active { transform: scale(0.98); }
.fi-btn:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); }
.fi-btn--lg { height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: var(--btn-fs-lg); }
.fi-btn--primary   { background: var(--fi-brand); color: #fff; border-color: var(--fi-brand); }
.fi-btn--primary:hover   { background: var(--fi-brand-dark); border-color: var(--fi-brand-dark); }
.fi-btn--secondary { background: transparent; color: var(--fi-text-primary); border-color: var(--fi-text-primary); }
.fi-btn--secondary:hover { background: var(--fi-text-primary); color: #fff; }
.fi-btn--ghost     { background: transparent; color: var(--fi-brand); border-color: transparent; height: auto; padding: 0; }
.fi-btn--ghost:hover     { color: var(--fi-brand-dark); }

/* Card */
.fi-card {
  background: var(--fi-surface);
  border: 1px solid var(--fi-border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.fi-card--dark {
  background: var(--fi-surface-inverse-tint);
  border-color: var(--fi-border-dark);
  box-shadow: none;
  color: var(--fi-text-inverse-body);
}

/* Link on dark — spec-compliant underline accent, AA */
.fi-link-on-dark {
  color: var(--fi-text-inverse);
  font-weight: 700;
  border-bottom: 2px solid var(--fi-brand-on-dark);
  padding-bottom: 2px;
  text-decoration: none;
  transition: border-color 160ms ease;
}
.fi-link-on-dark:hover { border-bottom-color: var(--fi-brand); }

/* Red anchor bar — the structural signature motif */
.fi-anchor-top {
  border-top: 3px solid var(--fi-brand);
  padding-top: 24px;
}