/* ============================================================
   VULKER — Design Tokens
   Brand: B2B SaaS para entrenadores · LATAM hispano
   Brand colors: basalto #0F1115 · lava #FF5722 · off-white #F7F4EE · ámbar #FFA200
   Flat system: sin gradients, sin sombras, sin glow. Bordes 1px + superficies.
   ============================================================ */

:root {
  /* --- Brand constants (no cambian entre temas) --- */
  --vk-basalt: #0F1115;
  --vk-lava: #FF5722;
  --vk-offwhite: #F7F4EE;
  --vk-amber: #FFA200;

  /* --- Spacing scale (base 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Radii (flat, contenido) --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Type families --- */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* --- Functional / state colors (separados de marca, muted y cálidos) --- */
  --fn-success: #2F855A;
  --fn-info: #3A6EA5;
  --fn-warning: #FFA200;
  --fn-danger: #FF5722;
}

/* ===================== LIGHT (default) ===================== */
:root,
[data-theme="light"] {
  color-scheme: light;
  --surface: #F7F4EE;          /* página */
  --surface-raised: #FFFFFF;   /* cards */
  --surface-sunken: #EFEBE2;   /* inputs, wells */
  --text-primary: #0F1115;
  --text-secondary: #6B6660;   /* warm gray */
  --text-tertiary: #97918A;
  --border: #E4DECF;
  --border-strong: #D6CFBE;
  --accent: #FF5722;
  --accent-hover: #E8430F;
  --accent-soft: #FCEADF;      /* fondo lava tenue */
  --amber: #FFA200;
  --amber-soft: #FFF0D6;
  --on-accent: #FFFFFF;

  --success-soft: #E3F1E9;
  --info-soft: #E4ECF5;
  --warning-soft: #FFF0D6;
  --danger-soft: #FCEADF;
}

/* ===================== DARK ===================== */
[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0F1115;
  --surface-raised: #16191F;
  --surface-sunken: #0A0C0F;
  --text-primary: #F7F4EE;
  --text-secondary: #9D9A95;
  --text-tertiary: #6E6B66;
  --border: #262A31;
  --border-strong: #353A43;
  --accent: #FF6A3D;
  --accent-hover: #FF7E55;
  --accent-soft: #2A1C16;
  --amber: #FFB02E;
  --amber-soft: #2C2310;
  --on-accent: #0F1115;

  --success-soft: #14271D;
  --info-soft: #131F2C;
  --warning-soft: #2C2310;
  --danger-soft: #2A1C16;
}