/* ============================================================
   SPARKY — Colors & Type
   Swiss minimalism · warm ember accent · light theme
   ============================================================ */

/* Type imports — Geist (sans + mono) substituted for the in-house
   "Söhne / Suisse Int'l" feel until brand-licensed files arrive. */
@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 {
  /* ---------- Palette · paper & ink ---------- */
  --paper:        #F6F4EE;   /* primary background — warm off-white */
  --paper-2:      #EFEBE1;   /* recessed surfaces, hover wells */
  --paper-3:      #E7E2D5;   /* dividers behind cards */
  --card:         #FFFFFF;   /* elevated card surface */

  --ink:          #14110F;   /* primary text — warm near-black */
  --ink-2:        #57524C;   /* secondary text */
  --ink-3:        #8A8079;   /* tertiary / captions / meta */
  --ink-4:        #B7AFA5;   /* disabled, placeholder */

  --rule:         #D8D2C6;   /* hairline rules */
  --rule-strong:  #1F1B17;   /* heavy rules, brand framing */

  /* ---------- Accent · ember ---------- */
  --ember:        #E5532B;   /* primary warm accent */
  --ember-deep:   #B43E1F;   /* press / heavy text on paper */
  --ember-soft:   #F4C9B5;   /* tinted backgrounds */
  --ember-wash:   #FBEEE5;   /* lightest tint */

  /* ---------- Semantic ---------- */
  --positive:     #2F7D5B;   /* validator up, APR, gains */
  --positive-soft:#E0EEE5;
  --caution:      #C68A0F;   /* watch, slashing risk */
  --caution-soft: #F5ECD4;
  --negative:     #B4302A;   /* slashed, error */
  --negative-soft:#F4DDD9;
  --info:         #2D5BA0;   /* informational, links */

  /* ---------- Type stacks ---------- */
  --font-sans:    "Geist", "Söhne", "Suisse Int'l", "Helvetica Neue",
                   ui-sans-serif, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace,
                   "SF Mono", monospace;

  /* ---------- Type scale (1.250 — major third, Swiss tight) ---------- */
  --fs-12:  0.75rem;   /* 12 — meta, caption */
  --fs-13:  0.8125rem; /* 13 — UI small */
  --fs-14:  0.875rem;  /* 14 — body small */
  --fs-16:  1rem;      /* 16 — body */
  --fs-18:  1.125rem;  /* 18 — lead */
  --fs-20:  1.25rem;   /* 20 — h5 */
  --fs-24:  1.5rem;    /* 24 — h4 */
  --fs-32:  2rem;      /* 32 — h3 */
  --fs-44:  2.75rem;   /* 44 — h2 */
  --fs-64:  4rem;      /* 64 — h1 */
  --fs-96:  6rem;      /* 96 — display */
  --fs-144: 9rem;      /* 144 — hero numeral */

  /* ---------- Weight ---------- */
  --fw-light:   300;       /* @kind font */
  --fw-regular: 400;       /* @kind font */
  --fw-medium:  500;       /* @kind font */
  --fw-semi:    600;       /* @kind font */
  --fw-bold:    700;       /* @kind font */

  /* ---------- Tracking ---------- */
  --tr-tight:   -0.02em;   /* @kind font */
  --tr-snug:    -0.01em;   /* @kind font */
  --tr-normal:   0;        /* @kind font */
  --tr-wide:    0.04em;    /* @kind font */
  --tr-wider:   0.12em;    /* @kind font */

  /* ---------- Leading ---------- */
  --lh-tight:   1.05;      /* @kind font */
  --lh-snug:    1.15;      /* @kind font */
  --lh-normal:  1.45;      /* @kind font */
  --lh-loose:   1.6;       /* @kind font */

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:   4px;
  --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;

  /* ---------- Radius ---------- */
  --r-0: 0px;       /* default — Swiss boxes are square */
  --r-1: 2px;       /* subtle softening on inputs/chips */
  --r-2: 4px;       /* cards, buttons (sparingly) */
  --r-pill: 999px;  /* tags, status dots */

  /* ---------- Borders ---------- */
  --bw-hair:   1px;
  --bw-thick:  2px;
  --bw-heavy:  4px;        /* brand framing */

  /* ---------- Shadows · used sparingly ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(20,17,15,0.06);
  --shadow-2: 0 1px 2px rgba(20,17,15,0.06), 0 4px 12px rgba(20,17,15,0.04);
  --shadow-3: 0 2px 4px rgba(20,17,15,0.06), 0 12px 32px rgba(20,17,15,0.06);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);    /* @kind other */
  --dur-fast:    120ms;    /* @kind other */
  --dur-base:    200ms;    /* @kind other */
  --dur-slow:    360ms;    /* @kind other */

  /* ---------- Grid ---------- */
  --grid-max:    1280px;   /* @kind spacing */
  --grid-gutter: 24px;     /* @kind spacing */
  --grid-cols:   12;       /* @kind other */
}

/* ============================================================
   Semantic element styles
   ============================================================ */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, .h-display {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 7vw, var(--fs-96));
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h1, .h1 {
  font-size: clamp(2.25rem, 4.6vw, var(--fs-64));
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h2, .h2 {
  font-size: var(--fs-44);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h3, .h3 {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h4, .h4 {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

h5, .h5 {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--ink);
}

.body-sm  { font-size: var(--fs-14); line-height: var(--lh-normal); }
.caption  { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--ink-3); }

.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-2);
}

.numeral, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-normal);
}

.figure-hero {
  font-family: var(--font-sans);
  font-size: clamp(4rem, 11vw, var(--fs-144));
  font-weight: var(--fw-light);
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
}

a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ember-deep); }

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--rule);
  margin: var(--s-8) 0;
}

::selection { background: var(--ember); color: var(--paper); }