/* =============================================================
   SANDSTREAM — colors_and_type.css
   The foundation: color tokens, type tokens, semantic styles.
   v1.0 — May 2026
   ============================================================= */

/* Fonts — load from Google Fonts in any consuming HTML:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
*/

:root {
  /* -----------------------------------------------------------
     COLOR — RAW PALETTE
     A warm bone/sand neutral spine, a near-black ink, and ONE
     signal accent (tangerine) pulled from the brand name's
     warm-sand register. Restraint is the move.
     ----------------------------------------------------------- */

  /* Neutrals (warm-cool) — Palette B, slightly cooler than original */
  --bone-50:   #F4F2EC;   /* page background, lightest */
  --bone-100:  #EAE7DE;   /* default surface */
  --bone-200:  #DFDBCE;   /* hairline backgrounds, cards on bone */
  --bone-300:  #CFC8B5;   /* dividers, soft borders */
  --bone-400:  #9E9982;   /* tertiary text, captions */
  --bone-500:  #5A6464;   /* secondary text — cool grey-green */

  /* Inks — cooler, teal-leaning warm-black */
  --ink-900:   #0E1A1A;   /* deepest, full bleed dark mode */
  --ink-800:   #131F1F;   /* dark surface */
  --ink-700:   #1C2828;   /* dark hover/raised */
  --ink-600:   #2C3838;   /* dark border */
  --ink-500:   #475252;   /* dark secondary text */
  --ink-400:   #76807F;   /* dark tertiary */
  --ink-300:   #A6ADAB;
  --ink-200:   #D4D8D6;
  --ink-100:   #EBEDEC;

  /* Signal — Stream teal. The brand-name literal read. */
  --signal:        #1E8A8A;  /* teal — primary action, marks */
  --signal-hover:  #166E6E;
  --signal-tint:   #D9EDED;  /* signal background fill */
  --signal-ink:    #062626;  /* signal-on-signal text */

  /* Secondary signal — used sparingly for data viz / one-off heat */
  --stream-warm:   #C77B3A;
  --stream-tint:   #F5E6D5;

  /* Semantic status (kept narrow on purpose) */
  --status-ok:     #2C7A4B;
  --status-warn:   #B5651D;
  --status-err:    #B23B2E;

  /* -----------------------------------------------------------
     COLOR — SEMANTIC TOKENS (light mode default)
     Always reference these in components, not raw palette.
     ----------------------------------------------------------- */
  --bg:           var(--bone-50);
  --surface:      var(--bone-100);
  --surface-2:    var(--bone-200);
  --border:       var(--bone-300);
  --border-strong: var(--ink-700);

  --fg:           var(--ink-900);
  --fg-2:         var(--bone-500);
  --fg-3:         var(--bone-400);
  --fg-on-dark:   var(--bone-50);

  --accent:       var(--signal);
  --accent-hover: var(--signal-hover);
  --accent-tint:  var(--signal-tint);
  --accent-ink:   var(--signal-ink);

  /* -----------------------------------------------------------
     TYPE — FAMILIES
     Three families. No more.
       Display: Instrument Serif — high contrast, gorgeous italics
       Sans:    Geist — precise, technical neo-grotesque
       Mono:    JetBrains Mono — metadata, code, version stamps
     ----------------------------------------------------------- */
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* -----------------------------------------------------------
     TYPE — RAW SCALE (fluid via clamp where appropriate)
     ----------------------------------------------------------- */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;
  --fs-4xl:  80px;
  --fs-5xl:  clamp(96px, 12vw, 168px);  /* hero display */

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-mono:   0.02em;

  /* -----------------------------------------------------------
     SPACING — 4px base scale
     ----------------------------------------------------------- */
  --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: 128px;
  --space-11: 192px;

  /* -----------------------------------------------------------
     RADII
     Cards and surfaces are sharp; only inputs/pills get rounding.
     ----------------------------------------------------------- */
  --radius-0:    0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
     SHADOWS — used SPARINGLY. Most surfaces use a 1px hairline.
     ----------------------------------------------------------- */
  --shadow-hairline: inset 0 0 0 1px var(--border);
  --shadow-card:    0 1px 0 rgba(10,10,12,0.04), 0 12px 32px -16px rgba(10,10,12,0.18);
  --shadow-pop:     0 2px 0 rgba(10,10,12,0.05), 0 24px 48px -24px rgba(10,10,12,0.28);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* -----------------------------------------------------------
     GRAIN — a subtle tactile texture overlay; used on heroes
     and dark sections, never on body text.
     ----------------------------------------------------------- */
  --grain: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* =============================================================
   DARK MODE — invert tokens; the same components work.
   ============================================================= */
[data-theme="dark"] {
  --bg:           var(--ink-900);
  --surface:      var(--ink-800);
  --surface-2:    var(--ink-700);
  --border:       var(--ink-600);
  --border-strong: var(--bone-300);

  --fg:           var(--bone-50);
  --fg-2:         var(--ink-300);
  --fg-3:         var(--ink-400);
  --fg-on-dark:   var(--bone-50);
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   Use these directly. Don't reach for raw scale tokens in
   components — these encapsulate family + size + tracking.
   ============================================================= */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-2);
}

.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-display-md {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  color: var(--fg);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Italic display — a SIGNATURE move. Use sparingly. */
.t-italic {
  font-style: italic;
}