/* ==========================================================================
   FOUNDING COURAGE, Colors & Type
   ==========================================================================
   Imported from the Founding Courage design system
   (_ds/founding-courage-design-system-019dedfe.../colors_and_type.css).
   Only the @font-face src path differs from the source.
   ========================================================================== */

/* -----------------------------  Fonts  ----------------------------------- */

@font-face {
  font-family: "League Spartan";
  src: url("../fonts/LeagueSpartan-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ----------------------------  Color Tokens  ----------------------------- */

:root {
  /* Brand core (from spec) */
  --fc-ink:        #231f20;   /* near-black, primary text on cream */
  --fc-cream:      #f9f4e8;   /* warm off-white, primary surface, text on orange */
  --fc-flame:      #f26522;   /* signature orange, primary background */

  /* Extended palette, warm, hand-mixed from the core */
  --fc-flame-deep: #d44e10;   /* pressed/hover state for flame */
  --fc-flame-soft: #f8855a;   /* lighter flame, accents, illustrations */
  --fc-ember:      #8a2c0a;   /* deep burnt accent, pull-quotes on cream */
  --fc-cream-2:    #efe7d2;   /* cream tinted darker, dividers, muted cards */
  --fc-cream-3:    #e3d7b5;   /* deepest cream tint, borders */
  --fc-ink-soft:   #4a4244;   /* softer ink, body on cream when lighter feel */
  --fc-ink-mute:   #7a7173;   /* captions, metadata, tertiary */

  /* Cover accents, drawn from the paper-craft cover art. Illustration + decorative use only. */
  --fc-cobalt:     #2f5ba8;
  --fc-sky:        #6b9dcf;
  --fc-coral:      #ec6b8e;
  --fc-hotpink:    #d03e6f;
  --fc-lavender:   #9579c0;
  --fc-purple:     #5b3d7a;

  /* Functional / semantic */
  --fc-success:    #4a7c44;
  --fc-warn:       #d49215;
  --fc-error:      #b32e1a;

  /* Foreground / background semantic, defaults are "on cream" */
  --fg-1: var(--fc-ink);
  --fg-2: var(--fc-ink-soft);
  --fg-3: var(--fc-ink-mute);
  --fg-on-flame: var(--fc-cream);
  --fg-on-ink:   var(--fc-cream);

  --bg-1: var(--fc-cream);
  --bg-2: var(--fc-cream-2);
  --bg-3: var(--fc-cream-3);
  --bg-flame: var(--fc-flame);
  --bg-ink:   var(--fc-ink);

  --border-1: var(--fc-ink);            /* the brand uses heavy ink rules */
  --border-2: var(--fc-cream-3);

  --accent: var(--fc-flame);
  --accent-deep: var(--fc-flame-deep);

  /* Type families, display is League Spartan Black (900), all caps */
  --font-display: "League Spartan", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display-cond: "League Spartan", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-text: "League Spartan", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --fw-display: 900;
  --font-mono: "Menlo", "Consolas", ui-monospace, monospace;

  /* Type scale, display (League Spartan Black, tight) */
  --fs-display-xl: clamp(80px, 14vw, 220px);
  --fs-display-l:  clamp(56px, 9vw, 132px);
  --fs-display-m:  clamp(40px, 6vw, 80px);
  --fs-display-s:  clamp(28px, 4vw, 48px);

  /* Type scale, body / UI (League Spartan) */
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-l: 18px;
  --fs-body:   16px;
  --fs-body-s: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  /* Line heights */
  --lh-display: 0.88;
  --lh-display-tight: 0.82;
  --lh-heading: 1.1;
  --lh-body: 1.55;
  --lh-tight: 1.2;

  /* Tracking */
  --ls-display: -0.01em;
  --ls-eyebrow: 0;
  --ls-button: 0.06em;

  /* Spacing scale (8pt-ish, with a tight 4 step) */
  --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: 144px;

  /* Radii, small, pragmatic. The brand is hard-edged & honest. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* Borders, the brand loves a thick honest rule */
  --rule-1: 1px;
  --rule-2: 2px;
  --rule-3: 4px;
  --rule-heavy: 6px;

  /* Shadows, minimal, used sparingly. The book uses depth via color, not blur. */
  --shadow-xs: 0 1px 2px rgba(35, 31, 32, 0.08);
  --shadow-sm: 0 2px 6px rgba(35, 31, 32, 0.10);
  --shadow-md: 0 8px 24px rgba(35, 31, 32, 0.12);
  --shadow-lg: 0 24px 60px rgba(35, 31, 32, 0.18);
  --shadow-press: inset 0 2px 0 rgba(35, 31, 32, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-stand: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ----------------------------  Semantic styles  ------------------------- */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fc-display, .fc-h-display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

h1, .fc-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
}
h2, .fc-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
}
h3, .fc-h3 {
  font-family: var(--font-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
h4, .fc-h4 {
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  font-weight: 600;
  margin: 0;
}

p, .fc-p {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}
.fc-p-lead {
  font-size: var(--fs-body-l);
  line-height: 1.5;
}

.fc-eyebrow {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.fc-quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display-s);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
}

.fc-caption {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

code, .fc-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Buttons — neo-brutalist: hard corners, offset shadow, lift on hover, press on active.
   The DS <Button> sets --fc-btn-shadow (ink on light, cream on flame). */
.fc-button {
  border-radius: var(--radius-3);
  box-shadow: 4px 4px 0 var(--fc-btn-shadow, var(--fc-ink));
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out),
              background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.fc-button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fc-btn-shadow, var(--fc-ink)); }
.fc-button:active { transform: translate(4px, 4px); box-shadow: none; }
.fc-button--link,
.fc-button--link:hover,
.fc-button--link:active { box-shadow: none; transform: none; }

/* Surface helpers */
.surface-cream { background: var(--bg-1); color: var(--fg-1); }
.surface-flame { background: var(--bg-flame); color: var(--fg-on-flame); }
.surface-ink   { background: var(--bg-ink);   color: var(--fg-on-ink); }