/* public/css/tokens.css — the single source of truth for every visual value.
   Templates and app.css reference ONLY the semantic layer, never a primitive. */

:root {
  /* ---- primitivas: oro (acento; SÓLO cifras de oro) ---- */
  --oro-50:  #fdf9e7;  --oro-100: #f9f0c2;  --oro-200: #f2e189;
  --oro-300: #e7cb4f;  --oro-400: #d9b528;  --oro-500: #c9ab00;
  --oro-600: #a68c00;  --oro-700: #7d6a04;  --oro-800: #61530c;
  --oro-900: #524610;  --oro-950: #302806;

  /* ---- primitivas: piedra (neutral cálido) ---- */
  --piedra-0:   #ffffff; --piedra-50:  #faf9f7; --piedra-100: #f2f1ed;
  --piedra-200: #e4e2dc; --piedra-300: #cbc8bf; --piedra-400: #a09c92;
  --piedra-500: #78746a; --piedra-600: #5a5750; --piedra-700: #42403a;
  --piedra-800: #2b2926; --piedra-900: #1c1b19; --piedra-950: #171717;

  /* ---- semánticas: claro ---- */
  --primary: var(--oro-600);
  --primary-contrast: var(--piedra-0);
  --oro-ink: var(--oro-700);
  --surface-ground: var(--piedra-50);
  --surface-card: var(--piedra-0);
  --surface-raised: var(--piedra-0);
  --surface-sunken: var(--piedra-100);
  --content: var(--piedra-900);
  --content-secondary: var(--piedra-500);
  --content-disabled: var(--piedra-400);
  --border: var(--piedra-200);
  --border-strong: var(--piedra-300);
  --success: #1c7a4a;
  --warn: #9a6700;
  --danger: #c0142f;
  --info: #155e94;
  --focus-ring: rgb(166 140 0 / 0.45);

  /* ---- tipografía ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --texto-display: 2.25rem; --lh-display: 1.05; --ls-display: -0.02em;
  --texto-h1: 1.5rem;       --lh-h1: 1.2;      --ls-h1: -0.015em;
  --texto-h2: 1.125rem;     --lh-h2: 1.3;      --ls-h2: -0.01em;
  --texto-h3: 0.9375rem;    --lh-h3: 1.35;
  --texto-body: 0.9375rem;  --lh-body: 1.5;
  --texto-sm: 0.875rem;     --lh-sm: 1.45;
  --texto-label: 0.8125rem; --lh-label: 1.4;
  --texto-overline: 0.6875rem; --ls-overline: 0.08em;

  /* ---- espacio (base 4px) ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;

  --page-max: 1440px;
  --page-pad: var(--e-6);
  --section-gap: var(--e-8);
  --card-pad: var(--e-5);
  --element-gap: var(--e-3);
  --field-gap: var(--e-4);
  --table-cell-pad-y: 10px;
  --table-cell-pad-x: var(--e-3);
  --nav-ancho: 240px;
  --nav-sub-indent: var(--e-4);

  /* ---- radio / elevación / movimiento ---- */
  --radio-card: 8px;
  --radio-input: 6px;
  --radio-pill: 999px;
  --shadow-modal: 0 12px 32px -8px rgb(23 23 23 / 0.24);
  --shadow-dropdown: 0 4px 12px -2px rgb(23 23 23 / 0.16);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---- semánticas: oscuro ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --primary: var(--oro-400);
    --primary-contrast: var(--piedra-950);
    --oro-ink: var(--oro-300);
    --surface-ground: var(--piedra-950);
    --surface-card: var(--piedra-900);
    --surface-raised: var(--piedra-800);
    --surface-sunken: var(--piedra-950);
    --content: var(--piedra-100);
    --content-secondary: var(--piedra-400);
    --content-disabled: var(--piedra-600);
    --border: var(--piedra-700);
    --border-strong: var(--piedra-600);
    --success: #3fbb7d;
    --warn: #e0a83c;
    --danger: #f2607a;
    --info: #5aa9dd;
    --focus-ring: rgb(217 181 40 / 0.5);
  }
}

/* El toggle explícito gana en ambas direcciones. */
:root[data-tema="oscuro"] {
  --primary: var(--oro-400);
  --primary-contrast: var(--piedra-950);
  --oro-ink: var(--oro-300);
  --surface-ground: var(--piedra-950);
  --surface-card: var(--piedra-900);
  --surface-raised: var(--piedra-800);
  --surface-sunken: var(--piedra-950);
  --content: var(--piedra-100);
  --content-secondary: var(--piedra-400);
  --content-disabled: var(--piedra-600);
  --border: var(--piedra-700);
  --border-strong: var(--piedra-600);
  --success: #3fbb7d;
  --warn: #e0a83c;
  --danger: #f2607a;
  --info: #5aa9dd;
  --focus-ring: rgb(217 181 40 / 0.5);
}

:root[data-tema="claro"] {
  --primary: var(--oro-600);
  --primary-contrast: var(--piedra-0);
  --oro-ink: var(--oro-700);
  --surface-ground: var(--piedra-50);
  --surface-card: var(--piedra-0);
  --surface-raised: var(--piedra-0);
  --surface-sunken: var(--piedra-100);
  --content: var(--piedra-900);
  --content-secondary: var(--piedra-500);
  --content-disabled: var(--piedra-400);
  --border: var(--piedra-200);
  --border-strong: var(--piedra-300);
  --success: #1c7a4a;
  --warn: #9a6700;
  --danger: #c0142f;
  --info: #155e94;
  --focus-ring: rgb(166 140 0 / 0.45);
}