/*
 * Eco-Power Infinity — design tokens (web)
 *
 * Single source of truth for the website and legacy dashboard.
 * Mirror of brand/tokens.ts (mobile).
 *
 * Usage: <link rel="stylesheet" href="brand/tokens.css">
 */

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/WorkSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/ChivoMono-VariableFont_wght.ttf') format('truetype-variations');
}

@font-face {
  font-family: 'Chivo Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/ChivoMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* Palette */
  --color-navy-ink: #0a1628;
  --color-forest:   #1a8a2e;
  --color-lime:     #7fe04a;
  --color-yellow:   #f4f76a;
  --color-cream:    #f5f0e1;
  --color-clay:     #c89478;
  --color-pink:     #f0c8d4;
  --color-coral:    #f06a4a;
  --color-sky:      #9ad4d8;
  --color-teal:     #0a6b7a;

  /* Semantic roles */
  --color-bg:      var(--color-cream);
  --color-surface: #ffffff;
  --color-ink:     var(--color-navy-ink);
  --color-subtle:  #5a6478;
  --color-border:  rgba(10, 22, 40, 0.06);

  /* Typography */
  --font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-weight-regular: 400;
  --font-weight-bold:    700;
  --font-weight-black:   900;

  /* Radii */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-input: 14px;   /* form inputs */
  --radius-card:  28px;   /* nav, CTAs, cards — brand-sheet rounded-square */
  --radius-pill:  999px;
}