/* =========================================================================
   OStoic Design System — Colors & Type
   Public-speaker variant of the Stoic brand.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Web fonts
   ------------------------------------------------------------------------- */

/* Display: Montserrat Alternates (rounded-modern, friendly authority)
   The repo only ships static cuts, so we declare each weight individually. */
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Alternates";
  src: url("../fonts/MontserratAlternates-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Secondary display / sub-heads: Montserrat (variable, full weight axis) */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Body: Inter (variable) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
  /* ---- Brand primary (the Stoic palette) -------------------------------- */
  --ostoic-yellow:       #FFD500;  /* digital primary (rays, energy) */
  --ostoic-yellow-print: #FFF200;  /* print only */
  --ostoic-red:          #C9332B;  /* single transformation accent */
  --ostoic-red-deep:     #BF202C;  /* gradient top, print accents */
  --ostoic-orange:       #F26A1F;  /* fire mid-tone (OStoic flame) */
  --ostoic-black:        #191919;  /* text + line illustrations */

  /* ---- Brand secondary (sparingly) ------------------------------------- */
  --ostoic-green:  #17AA67;
  --ostoic-blue:   #237EC9;
  --ostoic-purple: #4F1736;

  /* ---- Neutrals --------------------------------------------------------- */
  --neutral-white:   #FFFFFF;
  --neutral-paper:   #FAFAF7;  /* off-white surface, subtle warmth */
  --neutral-100:     #F2F2F0;
  --neutral-200:     #E6E6E6;  /* the canonical Stoic gray (rays, hairlines) */
  --neutral-300:     #D1D1CE;
  --neutral-400:     #A3A3A0;
  --neutral-500:     #6F6F6C;
  --neutral-600:     #4A4A47;
  --neutral-700:     #2E2E2C;
  --neutral-900:     #0E0E0E;

  /* ---- Semantic foreground ---------------------------------------------- */
  --fg-1: var(--ostoic-black);   /* primary text */
  --fg-2: var(--neutral-600);    /* secondary text, captions */
  --fg-3: var(--neutral-400);    /* tertiary, disabled */
  --fg-on-dark:  var(--neutral-white);
  --fg-on-yellow: var(--ostoic-black);
  --fg-accent: var(--ostoic-red);
  --fg-link: var(--ostoic-red);

  /* ---- Semantic backgrounds --------------------------------------------- */
  --bg-1: var(--neutral-white);  /* primary surface — almost always white */
  --bg-2: var(--neutral-paper);  /* subtle warmer surface */
  --bg-3: var(--neutral-100);    /* recessed surface */
  --bg-dark: var(--ostoic-black);
  --bg-yellow: var(--ostoic-yellow);

  /* ---- Borders / hairlines --------------------------------------------- */
  --border-hairline: var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--ostoic-black);

  /* ---- States ----------------------------------------------------------- */
  --state-success: var(--ostoic-green);
  --state-info:    var(--ostoic-blue);
  --state-danger:  var(--ostoic-red);
  --state-warn:    var(--ostoic-yellow);

  /* ---- Brand gradients (use SPARINGLY — the Stoic guide forbids
     gradients in image backgrounds; reserve these for the LOGO FLAME
     and rare ornamental accents). --------------------------------------- */
  --grad-flame: linear-gradient(180deg, #BF202C 0%, #F26A1F 55%, #FFD500 100%);
  --grad-flame-radial: radial-gradient(ellipse at 50% 100%, #FFD500 0%, #F26A1F 45%, #BF202C 100%);

  /* ---- Type families ---------------------------------------------------- */
  --font-display: "Montserrat Alternates", "Montserrat", system-ui, sans-serif;
  --font-sub:     "Montserrat", "Montserrat Alternates", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Wordmark family — used to set the literal "OStoic" word next to the logomark.
     Reserved as a SEPARATE token (not --font-display) because the wordmark may
     diverge from the rest of the type system. Currently aliased to display
     (Montserrat Alternates Black). To switch to Oseas RA: drop the .ttf into
     fonts/, declare an @font-face above, and update only this line. */
  --font-wordmark: "Oseas RA", "Montserrat Alternates", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (1.25 major-third, anchored at 16px) ----------------- */
  --fs-12: 0.75rem;     /* caption */
  --fs-14: 0.875rem;    /* small */
  --fs-16: 1rem;        /* body */
  --fs-18: 1.125rem;    /* lead */
  --fs-20: 1.25rem;     /* h6 */
  --fs-24: 1.5rem;      /* h5 */
  --fs-30: 1.875rem;    /* h4 */
  --fs-36: 2.25rem;     /* h3 */
  --fs-48: 3rem;        /* h2 */
  --fs-64: 4rem;        /* h1 */
  --fs-80: 5rem;        /* display */
  --fs-112: 7rem;       /* hero display */

  /* ---- Line heights ----------------------------------------------------- */
  --lh-tight:   1.05;   /* display */
  --lh-snug:    1.15;   /* h1–h3 */
  --lh-base:    1.5;    /* body */
  --lh-relaxed: 1.65;   /* long-form */

  /* ---- Letter spacing --------------------------------------------------- */
  --tracking-tighter: -0.03em;  /* large display */
  --tracking-tight:   -0.015em; /* headlines */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;   /* eyebrow / tagline ALL CAPS */

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --sp-0:  0;
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* ---- Radii (sharp by default — the brand favors angular) ------------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;          /* default for chips, inputs */
  --r-3: 8px;          /* cards, panels */
  --r-4: 12px;
  --r-pill: 999px;     /* pills only when calling out CTA */

  /* ---- Borders (line widths) ------------------------------------------ */
  --bw-hairline: 1px;
  --bw-1:        2px;   /* default illustrative line */
  --bw-2:        3px;   /* strong */
  --bw-3:        4px;   /* logo-mark, heavy emphasis */

  /* ---- Shadows (used VERY sparingly — keep it editorial) -------------- */
  --shadow-1: 0 1px 2px rgba(25, 25, 25, 0.06);
  --shadow-2: 0 4px 12px rgba(25, 25, 25, 0.08);
  --shadow-3: 0 12px 32px rgba(25, 25, 25, 0.12);
  --shadow-press: inset 0 2px 0 rgba(0, 0, 0, 0.08);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0.6, 0.3, 1);
  --ease-in:       cubic-bezier(0.5, 0, 0.9, 0.4);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;

  /* ---- Layout ----------------------------------------------------------- */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
}

/* -------------------------------------------------------------------------
   Element defaults
   ------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — display family, tight tracking. Sharp = "effective". */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(var(--fs-48), 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  font-weight: 800;
}
h2, .h2 {
  font-size: clamp(var(--fs-36), 4.5vw, var(--fs-64));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
}
h3, .h3 {
  font-size: clamp(var(--fs-30), 3vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
h4, .h4 {
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
h5, .h5 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 600;
}
h6, .h6 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-80), 9vw, var(--fs-112));
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: var(--tracking-tighter);
}

.eyebrow {
  font-family: var(--font-sub);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ostoic-red);
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--fg-2);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.caption {
  font-size: var(--fs-14);
  color: var(--fg-2);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--ostoic-black); }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* -------------------------------------------------------------------------
   Helpers
   ------------------------------------------------------------------------- */
.surface       { background: var(--bg-1); color: var(--fg-1); }
.surface-paper { background: var(--bg-2); color: var(--fg-1); }
.surface-dark  { background: var(--bg-dark); color: var(--fg-on-dark); }
.surface-yellow{ background: var(--bg-yellow); color: var(--fg-on-yellow); }

.accent-red    { color: var(--ostoic-red); }
.accent-yellow { color: var(--ostoic-yellow); }

.border-hairline { border: 1px solid var(--border-hairline); }
.border-strong   { border: 2px solid var(--border-strong); }

/* "One red accent" rule helper — wrap a single child in a span.accent */
.one-accent .accent { color: var(--ostoic-red); }