/* ─────────────────────────────────────────────────────────────────
   emaitzak. — Brand tokens
   Erabili CSS aldagai hauek lehentasunez. Tailwind erabiltzen baduzu,
   brand-tailwind.js fitxategiarekin extend ditzakezu.
   v1.0 · 2026
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ─── Colors ─────────────────────────────────────────────────── */
  --em-pine:    #0F3D2E;  /* Marka nagusia · header, kartelak, brand surface */
  --em-pine-hi: #0A2D21;  /* Pinu iluna · hover, sakontze */
  --em-pine-lo: #15533F;  /* Pinu argia · azpiborroak, separator */
  --em-gold:    #C99540;  /* Accent · puntua, CTA, link, garaileak */
  --em-gold-hi: #A57828;  /* Urre iluna · testu txikietan kontraste hobeagoa */
  --em-gold-lo: #E6BE6A;  /* Urre argia · hover, fokus argia */
  --em-cream:   #F4EFE6;  /* Surface · txartelak, eduki blokeak */
  --em-paper:   #F8F3E8;  /* Canvas · orriaren atzealdea */
  --em-ink:     #0A0A0A;  /* Testu nagusia atzealde argian */
  --em-rule:    rgba(10, 10, 10, 0.14);    /* Marra fina · separator */
  --em-rule-hi: rgba(10, 10, 10, 0.28);    /* Marra nabarmena */

  /* Semantic */
  --em-success: #1F7A4A;
  --em-warn:    #B97A1A;
  --em-danger:  #9B2B1B;
  --em-live:    var(--em-gold);

  /* ─── Type families ──────────────────────────────────────────── */
  --em-font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --em-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ─── Type scale (px values; use directly or override) ────────── */
  --em-text-display:  96px;
  --em-text-headline: 56px;
  --em-text-title:    34px;
  --em-text-body:     16px;
  --em-text-small:    14px;
  --em-text-data:     18px;
  --em-text-caption:  13px;

  /* ─── Radii ──────────────────────────────────────────────────── */
  --em-radius-chip:   18%;   /* % of chip size — keeps the txapela shape */
  --em-radius-md:     8px;
  --em-radius-lg:     14px;
  --em-radius-pill:   999px;

  /* ─── Spacing rhythm ─────────────────────────────────────────── */
  --em-space-1:   4px;
  --em-space-2:   8px;
  --em-space-3:  12px;
  --em-space-4:  16px;
  --em-space-5:  20px;
  --em-space-6:  24px;
  --em-space-8:  32px;
  --em-space-10: 40px;
  --em-space-12: 48px;
  --em-space-16: 64px;

  /* ─── Shadow ─────────────────────────────────────────────────── */
  --em-shadow-card: 0 4px 14px rgba(10, 10, 10, 0.08);
  --em-shadow-chip: 0 6px 18px rgba(15, 61, 46, 0.18);
}

/* Helpful resets bound to the brand */
html { color-scheme: light; }
body {
  font-family: var(--em-font-sans);
  background: var(--em-paper);
  color: var(--em-ink);
}
::selection {
  background: var(--em-gold);
  color: var(--em-pine);
}