/* =============================================================
   Snowball — Design Tokens
   Foundations: color, type, space, radius, shadow, motion
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Type families ---------- */
  --font-sans: "Geist", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (1.200 minor third, anchored 16px) ---------- */
  --text-3xs: 10px;   /* metadata, eyebrows, dense labels */
  --text-2xs: 11px;
  --text-xs:  12px;   /* captions, mono code labels */
  --text-sm:  13px;   /* dense UI body, table cells */
  --text-md:  14px;   /* default UI body */
  --text-base:16px;   /* prose body */
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;   /* hero, deck title */

  /* ---------- Line heights ---------- */
  --leading-tight: 1.05;
  --leading-snug:  1.15;
  --leading-norm:  1.4;
  --leading-loose: 1.6;

  /* ---------- Letter spacing ---------- */
  --tracking-tighter: -0.03em;  /* hero / display */
  --tracking-tight:   -0.015em; /* large headings */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;   /* eyebrows, micro-caps */
  --tracking-wider:   0.12em;   /* category labels */

  /* ---------- Weights ---------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- Color: neutral ramp (true gray, no tilt) ---------- */
  --paper:    #FCFCFD;   /* canvas */
  --ink-25:   #F8F9FA;
  --ink-50:   #F2F3F5;
  --ink-100:  #E7E8EB;   /* hairline / divider strong */
  --ink-150:  #DCDEE2;
  --ink-200:  #CACDD3;
  --ink-300:  #ACB0B7;
  --ink-400:  #8A8E96;
  --ink-500:  #6E727A;
  --ink-600:  #545861;
  --ink-700:  #3A3E47;
  --ink-800:  #25282E;
  --ink-900:  #16181C;
  --ink-950:  #0A0B0D;   /* near-black */

  /* ---------- Color: signal (single restrained accent) ----------
     Snowball uses one accent. Reserve for primary action,
     active state, and link. Never decoration. */
  --signal:        #0E8543;
  --signal-hover:  #0A6E37;
  --signal-press:  #074F27;
  --signal-tint:   #E3F2E6;   /* subtle background fill */
  --signal-fg:     #FFFFFF;

  /* ---------- Color: semantic ---------- */
  --success:   #117A3D;
  --success-tint: #E6F4EC;
  --warning:   #9A6B00;
  --warning-tint: #FBF1D9;
  --danger:    #B0211A;
  --danger-tint:  #FBE9E7;

  /* ---------- Foreground roles ---------- */
  --fg:        var(--ink-950);   /* primary */
  --fg-muted:  var(--ink-600);   /* secondary */
  --fg-subtle: var(--ink-400);   /* tertiary, captions */
  --fg-faint:  var(--ink-300);   /* disabled, placeholder */
  --fg-on-ink: var(--paper);     /* on dark */

  /* ---------- Surfaces ---------- */
  --bg:         var(--paper);
  --bg-sunken:  var(--ink-25);
  --bg-raised:  #FFFFFF;
  --bg-inverse: var(--ink-950);
  --bg-overlay: rgba(10, 11, 13, 0.5);

  /* ---------- Borders ---------- */
  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-faint:  var(--ink-50);
  --border-focus:  var(--signal);

  /* ---------- Spacing (4px base) ---------- */
  --s-0:   0;
  --s-px:  1px;
  --s-0_5: 2px;
  --s-1:   4px;
  --s-1_5: 6px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;
  --s-40:  160px;

  /* ---------- Radii (mostly square; small softening) ---------- */
  --radius-0:    0;
  --radius-1:    2px;   /* default UI */
  --radius-2:    4px;   /* cards, inputs */
  --radius-3:    6px;   /* buttons */
  --radius-4:    10px;  /* large cards, modals */
  --radius-pill: 999px;

  /* ---------- Shadow (sparse — borders do most of the work) ---------- */
  --shadow-0:  none;
  --shadow-1:  0 1px 0 rgba(10, 11, 13, 0.04);
  --shadow-2:  0 1px 2px rgba(10, 11, 13, 0.06), 0 0 0 1px rgba(10, 11, 13, 0.04);
  --shadow-3:  0 4px 12px rgba(10, 11, 13, 0.08), 0 0 0 1px rgba(10, 11, 13, 0.04);
  --shadow-4:  0 12px 32px -4px rgba(10, 11, 13, 0.12), 0 0 0 1px rgba(10, 11, 13, 0.06);
  --shadow-focus: 0 0 0 3px rgba(14, 133, 67, 0.18);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.2, 0.7, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-norm:    180ms;
  --dur-slow:    320ms;

  /* ---------- Layout ---------- */
  --max-w-prose: 68ch;
  --max-w-readable: 720px;
  --max-w-canvas: 1280px;
  --grid-cols: 12;
  --grid-gutter: 24px;
}

/* Dark surface (used for hero blocks, deck slides, code panels) */
.surface-inverse,
[data-surface="inverse"] {
  --bg: var(--ink-950);
  --bg-sunken: var(--ink-900);
  --bg-raised: var(--ink-800);
  --fg: var(--paper);
  --fg-muted: var(--ink-300);
  --fg-subtle: var(--ink-400);
  --fg-faint:  var(--ink-600);
  --border: var(--ink-800);
  --border-strong: var(--ink-700);
  --border-faint:  var(--ink-900);
  background: var(--bg);
  color: var(--fg);
}

/* =============================================================
   Semantic type roles — use these in product, not raw vars.
   ============================================================= */

.t-display,
.t-display-1 {
  font-family: var(--font-sans);
  font-size: var(--text-6xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
}
.t-display-2 {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-norm);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}
.t-h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-norm);
  color: var(--fg);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--fg);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-norm);
  color: var(--fg);
}
.t-body-xs {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-norm);
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-norm);
  color: var(--fg-subtle);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-norm);
  color: var(--fg);
}

.t-code,
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--ink-50);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
  border: 1px solid var(--border);
  color: var(--fg);
}

.t-link {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.t-link:hover { opacity: 0.7; }

/* Numerical (tabular figures, used in dashboards / decks for KPI) */
.t-num {
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

/* Optional global resets you can opt into via class on <body>. */
.reset {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}