/* base.css — tokens, reset, typography
 *
 * The identity is fixed: navy and yellow, a 2.5px ink stroke, a hard offset
 * shadow, and the illustrated workshop background. What this file adds is a
 * disciplined type scale and a neutral ramp so the loud parts have something
 * quiet to sit against.
 *
 * Archivo is self-hosted, not linked from Google Fonts: this server runs on a
 * classroom LAN that may have no route to the internet, and a webfont that
 * fails to load would drop the whole interface back to a system serif.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;           /* variable axis — one file covers every weight */
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Identity (unchanged from the mobile app) ───────────── */
  --yellow:    #FFB800;
  --red:       #E84040;
  --blue:      #3A7BD5;
  --green:     #3BB54A;
  --orange:    #F07B20;
  --teal:      #14B8A6;
  --purple:    #8B5CF6;
  --navy:      #1B3A8A;
  --navy-deep: #16264F;
  --ink:       #14171C;

  /* ── Neutral ramp ──────────────────────────────────────────
     Cool greys, tuned to sit on the blue-tinted background art. */
  --paper:   #FFFFFF;
  --bg:      #D6EEFF;
  --sidebar: #EDF5FD;
  --input:   #FFFAE8;
  --text:    #14171C;
  --text-2:  #47586E;
  --text-3:  #7C90A8;
  --line:    #C6D9EE;
  --line-2:  #E2EDF8;

  /* ── The drawn look ────────────────────────────────────────
     Two stroke weights, not one: cards and controls carry the full
     2.5px, small chips take 2px so they do not turn into blobs. */
  --stroke:   2.5px solid var(--ink);
  --stroke-2: 2px solid var(--ink);
  --pop:      4px 4px 0 var(--ink);
  --pop-sm:   2px 2px 0 var(--ink);
  --soft:     0 2px 10px rgba(16, 38, 84, 0.10);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ── Type scale ────────────────────────────────────────────
     A ~1.25 ratio off a 15px body. Archivo runs small, so the body
     sits a step up from the usual 14. */
  --fs-xs:  12.5px;
  --fs-sm:  13.5px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  23px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;

  --sidebar-w: 292px;
  --max-content: 1340px;
  --gutter: 30px;

  --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 450;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image: url('../assets/bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings lean on weight and tight tracking rather than size alone —
   Archivo tightens up well and it keeps the shop-signage feel. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.18;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }

/* Icons sit on the text baseline without nudging line boxes around. */
.ico { display: block; flex: none; }

/* Tabular figures everywhere a number is compared down a column. */
.num { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #a9c6e2;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #8ab0d4; background-clip: content-box; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}