/**
 * ================================================================
 * VITALIZA — src/styles/tokens.css
 * Design System v1.1 — capa única de tokens.
 *
 * Namespaced `--vt-*` para no chocar con el CSS existente durante la
 * migración. Objetivo final: que todos los componentes consuman estos
 * tokens y se retire el CSS duplicado. (Migración documentada como
 * deuda en la auditoría — additive y no rompe estilos actuales.)
 * ================================================================ */

:root {
  /* ── Marca ── */
  --vt-solar: #FF8A00;
  --vt-amber: #FFB84D;
  --vt-peach: #FFE7D5;
  --vt-sage: #9BB18A;
  --vt-ink: #2B2E34;
  --vt-cream: #F7F3EE;
  --vt-gradient: linear-gradient(160deg, #FF8A00, #FFB84D);

  /* ── Escala solar ── */
  --vt-solar-50:#FFF4E6; --vt-solar-100:#FFE4C4; --vt-solar-200:#FFD09A;
  --vt-solar-300:#FFB866; --vt-solar-400:#FF9E33; --vt-solar-500:#FF8A00;
  --vt-solar-600:#E67A00; --vt-solar-700:#B85C00; --vt-solar-800:#8F4700; --vt-solar-900:#6B3500;

  /* ── Sage ── */
  --vt-sage-50:#F0F3EC; --vt-sage-100:#DCE6D3; --vt-sage-300:#A8C193;
  --vt-sage-400:#9BB18A; --vt-sage-600:#5E7A50; --vt-sage-800:#384B31;

  /* ── Neutrales cálidos ── */
  --vt-n-0:#FFFFFF; --vt-n-25:#FFFDFB; --vt-n-50:#F7F3EE; --vt-n-100:#EFE9E1;
  --vt-n-200:#E2DAD0; --vt-n-300:#CDC3B6; --vt-n-400:#A79D90; --vt-n-500:#837A6E;
  --vt-n-600:#615A50; --vt-n-700:#47423B; --vt-n-900:#2B2E34; --vt-n-1000:#1B1D21;

  /* ── Semánticos (modo claro) ── */
  --vt-bg-canvas: #F7F3EE;
  --vt-bg-surface: #FFFDFB;
  --vt-bg-surface-alt: #EFE9E1;
  --vt-bg-warm: #FFE7D5;
  --vt-text-primary: #2B2E34;
  --vt-text-secondary: #615A50;
  --vt-text-muted: #837A6E;
  --vt-border-subtle: #E2DAD0;

  /* ── Estados ── */
  --vt-success: #5E7A50; --vt-success-bg: #F0F3EC;
  --vt-warning: #FFB84D; --vt-warning-bg: #FFF3E0; --vt-warning-fg: #7A4E0F;
  --vt-error: #C6402F;   --vt-error-bg: #FBEAE7;
  --vt-info: #3E6B89;    --vt-info-bg: #EAF0F4;

  /* ── Acción accesible (blanco sobre naranja profundo) ── */
  --vt-action: #B85C00;

  /* ── Espaciado (4pt) ── */
  --vt-space-1:2px; --vt-space-2:4px; --vt-space-3:8px; --vt-space-4:12px;
  --vt-space-5:16px; --vt-space-6:20px; --vt-space-7:24px; --vt-space-8:32px;
  --vt-space-9:40px; --vt-space-10:48px; --vt-space-11:64px;

  /* ── Radios ── */
  --vt-radius-xs:8px; --vt-radius-sm:12px; --vt-radius-md:16px;
  --vt-radius-lg:20px; --vt-radius-xl:28px; --vt-radius-2xl:36px; --vt-radius-pill:999px;

  /* ── Sombras (cálidas, suaves) ── */
  --vt-elev-card: 0 1px 2px rgba(43,46,52,.04), 0 2px 8px rgba(43,46,52,.05);
  --vt-elev-raised: 0 2px 6px rgba(43,46,52,.06), 0 8px 24px rgba(43,46,52,.07);
  --vt-elev-overlay: 0 8px 24px rgba(43,46,52,.10), 0 24px 48px rgba(43,46,52,.10);
  --vt-elev-sheet: 0 -8px 40px rgba(43,46,52,.12);

  /* ── Bordes / líneas ── */
  --vt-border-hairline:1px; --vt-border-regular:1.5px; --vt-border-strong:2px;
  --vt-stroke-icon:1.75px;

  /* ── Motion ── */
  --vt-motion-fast:120ms; --vt-motion-base:200ms; --vt-motion-slow:320ms;
  --vt-ease-standard: cubic-bezier(.2,0,0,1);
  --vt-ease-enter: cubic-bezier(0,0,.2,1);
  --vt-ease-exit: cubic-bezier(.4,0,1,1);

  /* ── Tipografía ── */
  --vt-font-display: "General Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --vt-font-text: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ── Z-index ── */
  --vt-z-nav:200; --vt-z-sheet:400; --vt-z-modal:500; --vt-z-toast:600;
}

/* ── Modo oscuro ── */
:root[data-theme="dark"], .theme-dark {
  --vt-bg-canvas: #17181B;
  --vt-bg-surface: #1F2125;
  --vt-bg-surface-alt: #26282D;
  --vt-border-subtle: #34373D;
  --vt-text-primary: #F2ECE3;
  --vt-text-secondary: #B8B2A8;
  --vt-solar-500: #FF9A1F;
  --vt-success:#A8C193; --vt-warning:#FFC461; --vt-error:#E8705E; --vt-info:#7FA9C4;
}