/* Kyezen — Design System v4 tokens + fuentes self-host (SSOT: docs/status/design-system-v4.md)
   Reboot premium cardless. Sin CDN (CSP). Compartido por landing + páginas legales. */

/* ── Fuentes self-host (woff2 local /fonts) ─────────────────────────────── */
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk.woff2') format('woff2'); /* variable */
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono.woff2') format('woff2'); /* variable */
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ── Tokens color — tema oscuro (primario) ──────────────────────────────── */
:root {
  --jade: #00B37E;        /* acento firma: CTA, links, mark, dato hero */
  --jade-glow: #00E5A0;   /* SOLO hover/focus/glow */
  --jade-deep: #00805A;   /* pressed, bordes, subrayados */
  --bg: #0A0F0D;
  --surface-1: #111815;
  --surface-2: #18211D;
  --surface-3: #1E2823;
  --text: #F4F7F5;
  --muted: #8B968F;
  --border: #232C28;
  --border-soft: #1A211D;
  --ok: #2FBE8A;
  --warn: #F2B84B;
  --danger: #F2544B;
  --info: #5AA9F2;

  --font-display: 'Clash Display', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale (base 16, ~1.25) */
  --t-12: .75rem;  --t-14: .875rem; --t-16: 1rem;   --t-20: 1.25rem;
  --t-25: 1.5625rem; --t-32: 2rem;  --t-40: 2.5rem; --t-52: 3.25rem; --t-64: 4rem;

  --radius: 14px; --radius-lg: 22px;
  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Tokens color — tema claro (secundario) ─────────────────────────────── */
:root[data-theme="light"] {
  --bg: #EEF2F0;
  --surface-1: #FFFFFF;
  --surface-2: #F4F7F5;
  --surface-3: #EEF2F0;
  --text: #0A0F0D;
  --muted: #5C6B64;
  --border: #D8E0DB;
  --border-soft: #D8E0DB;
}

/* Dark es PRIMARIO (marca premium dark-first). Light SOLO por toggle explícito
   ([data-theme="light"]) — no auto-switch por OS, para mantener la identidad. */

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-16); line-height: 1.6;
  font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; line-height: 1.05; margin: 0; }
a { color: var(--jade); text-decoration: none; }
a:hover { color: var(--jade-glow); }
.mono, .amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--t-12); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}