/* Design tokens: the Ember scheme (dark, warm near-black with amber). One typeface. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #13110f; --fg: #f3ede5; --soft: #c7bdb1; --muted: #8f857a;
  --accent: #f0a54a; --on-accent: #1a1209;
  --glow1: rgba(160, 72, 24, .36); --glow2: rgba(96, 44, 90, .22); --glow3: rgba(150, 110, 40, .20);
  --glass-bg: linear-gradient(140deg, rgba(255,245,230,.08), rgba(255,245,230,.02));
  --glass-line: rgba(255,240,220,.11); --glass-shadow: inset 0 1px 0 rgba(255,240,220,.10), 0 24px 60px -28px rgba(0,0,0,.75);
  --field-bg: rgba(0,0,0,.3); --panel-bg: rgba(20, 16, 12, .6); --surface: #1c1916; --line: rgba(255,240,220,.10);
  --danger: #ff8a80;
  --ember: #f3f1ec; /* Stone, so the night highlight is calm; the underline marks it */
  --ember-glow: #f2b48a;
  --ember-line: #e8a07a;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --display-weight: 800; --display-track: -.05em;
  --radius: 10px;
  --gutter: clamp(16px, 4vw, 40px);
  /* One spring for every motion detail: a quick settle with a 3% overshoot.
     Where linear() isn't supported, the CSS details simply don't animate and motion.js uses a plain ease. */
  --spring: linear(0, 0.038, 0.13, 0.251, 0.381, 0.508, 0.624, 0.725, 0.809, 0.876, 0.928, 0.967, 0.993, 1.011, 1.022, 1.027, 1.028, 1.027, 1.025, 1.021, 1.018, 1.014, 1.011, 1.008, 1.005, 1.004, 1.002, 1.001, 1, 1, 0.999, 0.999, 1);
  color-scheme: dark;
}