/* tokens.css — ÚNICA fuente de verdad de valores de diseño.
   REGLA: ningún otro archivo CSS/template puede contener hex ni valores crudos de color.
   Cambio de paleta futuro: editar SOLO este archivo (o añadir un bloque :root[data-theme]). */

/* Orden de cascade layers (se establece aquí, primer archivo cargado) */
@layer tokens, base, components, shells;

@layer tokens {
  :root {
    /* ── Primitivos: escala de grises fríos ── */
    --gray-50: #F8FAFC;  --gray-100: #F1F5F9;  --gray-200: #E2E8F0;
    --gray-300: #CBD5E1; --gray-400: #94A3B8;  --gray-500: #64748B;
    --gray-600: #475569; --gray-700: #334155;  --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* ── Primitivos: acento (PROVISIONAL — teal clínico) ── */
    --teal-50: #F0FDFA;  --teal-100: #CCFBF1;  --teal-600: #0F766E;
    --teal-700: #115E59; --teal-800: #134E4A;

    /* ── Primitivos: semáforo (semántica regulada ISO) ── */
    --ok: #15803D;  --warn: #B45309;  --bad: #B91C1C;  --none: #64748B;

    /* ── Primitivos: estados de ciclo (datos, no acento) ── */
    --estado-abierto: #1D4ED8;
    --estado-calculado: #0F766E;

    /* ── Semánticos: superficies, texto, bordes ── */
    --bg: var(--gray-50);
    --surface: #FFFFFF;
    --surface-2: var(--gray-50);
    --text: var(--gray-900);
    --text-2: var(--gray-500);
    --text-3: var(--gray-400);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);

    /* ── Semánticos: acento ── */
    --accent: var(--teal-600);
    --accent-hover: var(--teal-700);
    --accent-contrast: #FFFFFF;
    --accent-soft: var(--teal-50);
    --bad-contrast: #FFFFFF;

    /* ── Semánticos: fondos teñidos de semáforo (derivados, color-mix nativo) ── */
    --ok-bg:   color-mix(in srgb, var(--ok) 10%, var(--surface));
    --warn-bg: color-mix(in srgb, var(--warn) 12%, var(--surface));
    --bad-bg:  color-mix(in srgb, var(--bad) 10%, var(--surface));
    --none-bg: color-mix(in srgb, var(--none) 10%, var(--surface));

    /* ── Tipografía ── */
    --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.8125rem;  /* 13px */
    --text-base: 0.875rem; /* 14px — cuerpo base */
    --text-md: 1rem;       /* 16px */
    --text-lg: 1.25rem;    /* 20px */
    --text-xl: 1.5rem;     /* 24px */
    --text-2xl: 1.875rem;  /* 30px */

    /* ── Espaciado (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;

    /* ── Radios (única escala de la app) ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-pill: 999px;

    /* ── Sombras (teñidas al tono del fondo; nunca negro puro) ── */
    --shadow-card: 0 1px 2px rgb(15 23 42 / 0.05), 0 1px 3px rgb(15 23 42 / 0.06);
    --shadow-pop: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 10px 15px -3px rgb(15 23 42 / 0.10);

    /* ── Motion ── */
    --dur: 160ms;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── z-index (escala documentada; no usar valores arbitrarios) ── */
    --z-dropdown: 10;
    --z-topbar: 20;
    --z-modal: 30;
  }

  /* Ejemplo de cambio de paleta futuro (NO activar en esta fase):
  :root[data-theme="indigo"] {
    --accent: #4338CA;
    --accent-hover: #3730A3;
    --accent-soft: #EEF2FF;
  }
  */
}