/* ============================================================
   VIDYA · Foundations: colors + type
   Import this stylesheet to get tokens, base typography, and
   semantic class helpers. Use CSS variables — never raw hex.
   ============================================================ */

/* --- Fonts (Montserrat, OFL, ./fonts) --------------------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100; font-display: swap; src: url("assets/fonts/Montserrat-Thin.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 200; font-display: swap; src: url("assets/fonts/Montserrat-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/Montserrat-Light.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/Montserrat-Medium.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/Montserrat-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/Montserrat-Black.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300; font-display: swap; src: url("assets/fonts/Montserrat-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/Montserrat-Italic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 500; font-display: swap; src: url("assets/fonts/Montserrat-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 600; font-display: swap; src: url("assets/fonts/Montserrat-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 700; font-display: swap; src: url("assets/fonts/Montserrat-BoldItalic.ttf") format("truetype"); }

/* Mono: rely on the platform monospace stack (--font-mono) — ui-monospace /
   SF Mono / Menlo / Consolas. No remote webfont, so nothing to fail to load.
   The landing pages render no code; this is here only for completeness. */

:root {
  /* ---- Ink: the neutral ramp, a cool near-neutral graphite ----- */
  /* Tuned to sit quietly beneath the Tide teal accent (V2.0). */
  --ink-900: #15201E;   /* primary text on light, dark CTAs */
  --ink-800: #1F2928;   /* dark surface, raised */
  --ink-700: #232E2D;   /* dark canvas (logo dark sample) */
  --ink-600: #2F3A39;   /* logo mark on light · body text */
  --ink-500: #45504E;   /* body emphasis · italic */
  --ink-400: #687270;   /* secondary text · captions */
  --ink-300: #98A2A0;   /* tertiary · disabled labels */
  --ink-200: #C7CFCD;   /* logo silver · dividers, borders */
  --ink-100: #E3E9E7;   /* subtle borders, hairlines */
  --ink-50:  #F1F6F4;   /* subtle surface fills */
  --paper:   #F6FAF9;   /* default light canvas (cool off-white) */
  --white:   #FFFFFF;

  /* ---- Tide: the single cool accent (Tiffany blue) ------- */
  /* Deep midnight teal -> pale baby blue. Primary is Tide/300. */
  --tide-900: #0C6170;   /* eyebrows, accent text, info — readable on light */
  --tide-700: #1B9486;
  --tide-500: #37BEB0;   /* active states, links, charts, icons on light */
  --tide-300: #A4E5E0;   /* PRIMARY — Tiffany · CTAs · brand · focus rings */
  --tide-100: #DBF5F0;   /* badge fills · highlights */

  /* ---- Semantic (muted, mature) -------------------------- */
  --signal-success: #4F9583;   /* Sage     */
  --signal-warn:    #D98A34;   /* Amber    */
  --signal-error:   #B14545;   /* Clay     */
  --signal-info:    #0C6170;   /* Midnight (= Tide/900) */

  /* ---- Foreground / background semantic aliases ---------- */
  --bg:          var(--paper);
  --bg-raised:   var(--white);
  --bg-sunken:   var(--ink-50);
  --fg:          var(--ink-900);
  --fg-1:        var(--ink-900);   /* headings */
  --fg-2:        var(--ink-700);   /* body */
  --fg-3:        var(--ink-500);   /* secondary body */
  --fg-4:        var(--ink-400);   /* captions, metadata */
  --fg-5:        var(--ink-300);   /* tertiary */
  --border:      var(--ink-100);
  --border-strong: var(--ink-200);
  --accent:      var(--tide-300);   /* primary CTA bg, brand moments, focus */
  --accent-deep: var(--tide-500);   /* links, active states, icons, chart fills */
  --accent-text: var(--tide-900);   /* eyebrows / accent text on LIGHT surfaces */
  --accent-text-dark: var(--tide-300); /* eyebrows / accent text on DARK surfaces */
  --accent-soft: var(--tide-100);   /* badge fills, highlight backgrounds */
  --accent-ink:  var(--ink-900);    /* readable foreground on accent bg */

  /* ---- Bloom -> Tide compatibility shim ------------------ */
  /* Legacy var names kept so nothing ever renders the old gold. */
  /* Prefer --accent / --accent-text / --tide-* going forward.  */
  --bloom-900: var(--tide-900);
  --bloom-700: var(--tide-500);
  --bloom-500: var(--tide-300);
  --bloom-300: var(--tide-300);
  --bloom-100: var(--tide-100);

  /* ---- Type ------------------------------------------------ */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", serif;        /* same family, different weights */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Weights */
  --w-thin: 200;     /* @kind font */
  --w-light: 300;    /* @kind font */
  --w-regular: 400;  /* @kind font */
  --w-medium: 500;   /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold: 700;     /* @kind font */

  /* Tracking */
  --track-display: -0.025em;   /* big light type */
  --track-tight:   -0.015em;
  --track-snug:    -0.005em;
  --track-normal:  0;          /* @kind other */
  --track-wide:    0.04em;
  --track-eyebrow: 0.16em;     /* caps · labels */
  --track-meta:    0.18em;     /* tiny caps · section labels */

  /* Type scale (px) */
  --t-display: 64px;
  --t-h1: 40px;
  --t-h2: 26px;
  --t-h3: 20px;
  --t-body: 16px;
  --t-small: 13px;
  --t-meta: 11px;
  --t-eyebrow: 10px;

  /* ---- Spacing scale (4-unit base) ----------------------- */
  --space-0: 0;
  --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;

  /* ---- Radii: small, restrained -------------------------- */
  --radius-1: 2px;    /* tags */
  --radius-2: 4px;    /* buttons, swatches */
  --radius-3: 6px;    /* cards */
  --radius-4: 8px;    /* large surfaces */
  --radius-5: 12px;   /* hero blocks */
  --radius-pill: 999px;

  /* ---- Hairlines + elevation ----------------------------- */
  --hairline: 1px solid var(--border);
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(21,32,30,0.04);
  --shadow-2: 0 4px 14px rgba(21,32,30,0.07);
  --shadow-3: 0 12px 36px rgba(21,32,30,0.12);
  --shadow-focus: 0 0 0 3px rgba(55,190,176,0.40);  /* tide focus ring */

  /* ---- Motion -------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);  /* @kind other */
  --duration-fast: 120ms;   /* @kind other */
  --duration-base: 200ms;   /* @kind other */
  --duration-slow: 320ms;   /* @kind other */
}

/* Dark surface tokens — invert the foreground/background aliases */
[data-theme="dark"], .vidya-dark {
  --bg:          var(--ink-700);
  --bg-raised:   var(--ink-800);
  --bg-sunken:   var(--ink-900);
  --fg:          var(--ink-100);
  --fg-1:        var(--ink-100);
  --fg-2:        var(--ink-200);
  --fg-3:        var(--ink-300);
  --fg-4:        var(--ink-400);
  --fg-5:        var(--ink-500);
  --border:      var(--ink-600);
  --border-strong: var(--ink-500);
  --accent-ink:  var(--ink-900);
}

/* ===== Base typography =================================== */
html, body { background: var(--bg); color: var(--fg-2); }
html { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; }

/* Semantic element rules — apply if you don't want utility classes */
h1, .h-display {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  margin: 0 0 16px;
}
h1 em, .h-display em { font-style: italic; font-weight: var(--w-light); color: var(--fg-3); }

h2, .h-1 {
  font-weight: var(--w-semibold);
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  margin: 0 0 8px;
}
h3, .h-2 {
  font-weight: var(--w-semibold);
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
  margin: 0 0 8px;
}
p, .p {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-3);
  margin: 0 0 16px;
  text-wrap: pretty;
}
small, .small { font-size: var(--t-small); color: var(--fg-4); line-height: 1.5; }

/* Eyebrow / label — caps, tracked. The Vidya signature */
.eyebrow, .label {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-4);
  font-feature-settings: "tnum" on;
}
.eyebrow--accent { color: var(--accent); }
.section-label {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Italic editorial run-in, e.g. "warmed by knowledge." */
.editorial-italic { font-style: italic; font-weight: var(--w-light); color: var(--fg-3); }

/* Code */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-50);
  color: var(--fg-2);
  padding: 1px 6px;
  border-radius: var(--radius-2);
}
pre { padding: 16px; line-height: 1.55; overflow:auto; }

/* Tnum-ready numerics (use on metadata, prices, mastery %s) */
.tnum { font-feature-settings: "tnum" on, "lnum" on; letter-spacing: var(--track-wide); }

/* Focus */
:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-2);
}

/* Selection */
::selection { background: var(--tide-100); color: var(--ink-900); }