/* ═══════════════════════════════════════════════════════
   ANOVA DESIGN SYSTEM — tokens.css v1.0.1
   Monocromático · Flat · Line-art · Blueprint
   "Confiança que vira execução."

   USO: @import 'design-system/tokens.css';
   ═══════════════════════════════════════════════════════ */

/* ─── FONTS ──────────────────────────────────────────── */
@font-face{font-family:'SF Pro Display';src:url('https://sf.abarber.me/SF-Pro-Display-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('https://sf.abarber.me/SF-Pro-Display-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('https://sf.abarber.me/SF-Pro-Display-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('https://sf.abarber.me/SF-Pro-Display-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('https://sf.abarber.me/SF-Pro-Display-Bold.otf') format('opentype');font-weight:700;font-display:swap}

/* ─── PALETTE — 6 tons, zero exceções ────────────────── */
:root {
  --onyx:      #000000;
  --white:     #FFFFFF;
  --charcoal:  #333333;
  --grey:      #888888;
  --silver:    #CCCCCC;
  --snow:      #F8F8F8;

  /* Semantic */
  --bg:         var(--white);
  --bg-alt:     var(--snow);
  --surface:    var(--white);
  --border:     var(--silver);
  --border-hi:  var(--grey);
  --text-1:     var(--onyx);
  --text-2:     var(--charcoal);
  --text-3:     var(--grey);
  --accent:     var(--onyx);
  --accent-inv: var(--white);

  /* ─── TYPOGRAPHY — Apple-aligned scale ──────────────── */
  --font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'DM Mono', 'SF Mono', monospace;

  --text-hero:  76px;  /* wght 700  letter-spacing: -.04em */
  --text-3xl:   56px;  /* wght 700  letter-spacing: -.03em */
  --text-2xl:   40px;  /* wght 600  letter-spacing: -.02em */
  --text-xl:    28px;  /* wght 600  letter-spacing: -.02em */
  --text-lg:    22px;  /* wght 500 */
  --text-md:    18px;  /* wght 400 */
  --text-base:  15px;  /* wght 400  — body default */
  --text-sm:    13px;  /* wght 500 */
  --text-xs:    11px;  /* DM Mono   — badges, code */
  --text-micro: 10px;  /* DM Mono   — smallest allowed */

  /* ─── SPACING — 8pt grid ────────────────────────────── */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

  /* ─── RADIUS ────────────────────────────────────────── */
  --r-sm:       6px;   /* checkboxes, small elements */
  --r-md:       10px;  /* buttons, inputs, selects */
  --r-lg:       16px;  /* intermediate */
  --r-xl:       24px;  /* cards, panels, modals, containers */
  --r-2xl:      32px;  /* large containers */
  --r-squircle: 22%;   /* logo ANOVA only */
  --r-pill:     99px;  /* badges, tags, toggles */

  /* ─── MOTION ────────────────────────────────────────── */
  --ease:        cubic-bezier(.25, .1, .25, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur:         300ms;
}

/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--text-1); color: var(--bg); }

/* ─── METRIC DELTA GRADIENTS (única exceção cromática) ── */
.metric-up {
  background: linear-gradient(135deg, #1a3a2a 0%, #2d6b4f 30%, #4a9e72 60%, #6fc496 80%, #3d7a5a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--mono); font-weight: 700; font-size: 11px;
}
.metric-down {
  background: linear-gradient(135deg, #8b3a00 0%, #c45200 25%, #e86800 50%, #d43d2f 75%, #9a2a1a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--mono); font-weight: 700; font-size: 11px;
}