:root {
  /* ---- Core neutrals ---- */
  --ink: #201e1d;
  --text: var(--ink);
  --bg: #efe7db;
  --card-bg: #fbf8f2;

  --n-100: #f7f6f5;
  --n-200: #e6e4e3;
  --n-300: #d1cfce;
  --n-400: #b3b0ae;
  --n-500: #96938f;
  --n-600: #726f6c;

  --border: var(--n-200);
  --border-strong: var(--n-500);   /* CHANGED from --n-300 (#d1cfce, 1.55:1) → #96938f (3.06:1). */
                                     /* --n-300 fails the 3:1 non-text-contrast minimum for */
                                     /* input/button boundaries; --n-500 clears it. */

  --muted: var(--n-600);            /* CHANGED from --n-500 (#96938f, 3.06:1 on white — fails */
                                     /* AA body text) → #726f6c (4.99:1). Use for ALL text that */
                                     /* must be read: .hint, .kpi-label, .card-subtitle, table */
                                     /* headers, chart axis/value labels. */
  --muted-2: var(--n-500);          /* Decorative/non-required text only: placeholders, disabled */
                                     /* control text, chart gridline labels that duplicate a bar */
                                     /* value shown elsewhere. Do NOT use for body copy. */
  --muted-3: var(--n-400);          /* Purely ornamental (e.g. legend-dot outline). */

  /* ---- Brand accent (terracota, rebranding "Opción C" — 2026-08-23) ---- */
  --accent: #c1502e;                /* Button/fill background. White text on it is 4.71:1 — */
                                     /* clears AA. Use for .btn-primary bg, active nav border, */
                                     /* focus rings. */
  --accent-hover: #93381c;          /* Hover/active fill, 7.02:1 under white text. */
  --accent-dark: var(--accent-hover); /* Alias kept so existing CSS referencing --accent-dark still works. */
  --accent-bright: #d66a44;         /* Lighter terracota. Decorative/graphic use only (icons, */
                                     /* chart bars, thin kpi top-bar, brand-mark logo tile) where */
                                     /* only the 3:1 non-text minimum applies — never put small */
                                     /* text directly on this fill. */
  --accent-text: var(--accent-hover); /* Plain-text accent color (links, "Ver"/"Editar" text buttons, */
                                     /* active menu item text). Aliased to --accent-hover rather than */
                                     /* --accent because --accent as text on --card-bg is only 4.45:1 */
                                     /* (fails AA); --accent-hover clears it at 7.02:1. Flips to a */
                                     /* lighter terracota in dark mode, see §2. */
  --accent-soft: #f3e2d8;
  --accent-soft-strong: #e8c9b4;    /* Hover/active state on top of accent-soft surfaces */
                                     /* (e.g. .cal-cell.has-deposit:hover fill). */
  --accent-soft-text: var(--accent-hover); /* Text color for anything sitting ON TOP of an
                                     --accent-soft fill (.login-error, .access-badge.ok,
                                     .cal-cell .cal-amount, .context-client-item.active,
                                     .context-admin-btn:hover). 5.91:1 on light --accent-soft. */

  /* ---- Brand palette (per-instrumento badges/dots) ---- */
  --brand-visa: #1a4fb4;            /* unchanged — 7.45:1 white text */
  --brand-mastercard: #b8481f;      /* CHANGED from #d9542f (3.99:1, fails) → 5.28:1. Also now */
                                     /* reads as clearly distinct from --accent, which it was too */
                                     /* close to before. */
  --brand-cabal: #1a7a42;           /* CHANGED from #1f8f4e (4.12:1, fails) → 5.38:1 */
  --brand-mercadopago: #007299;     /* CHANGED from #00a4dc (2.86:1, fails badly) → 5.43:1 */
  --brand-mides: #7b4bb0;           /* unchanged — 6.05:1 white text */
  --brand-otros: #726f6c;           /* unchanged (= --n-600) — 4.99:1 white text */

  /* ---- Estado de cobro en el Calendario (única excepción al acento único: se necesitan 4
     estados distinguibles a simple vista — completado / adeudado / a cobrar / hoy — algo que
     un solo color de acento no puede resolver). "Adeudado" reutiliza --accent-soft/-text
     (mismo lenguaje visual que "pendiente de depósito bancario" en Verificar depósito), así
     que solo hacen falta tokens nuevos para "completado" y "a cobrar". ---- */
  --status-complete: #1a7a42;       /* = --brand-cabal, ya auditado: 5.38:1 sobre blanco */
  --status-complete-soft: #e3f3ea;
  --status-complete-text: var(--status-complete);
  --status-upcoming: #007299;       /* = --brand-mercadopago, ya auditado: 5.43:1 sobre blanco */
  --status-upcoming-soft: #e3eef2;
  --status-upcoming-text: var(--status-upcoming);

  /* ---- Elevation ---- */
  /* Stripe-style soft/layered shadows: a tight contact shadow + a wider diffuse one, instead of
     a single hard-edged drop shadow. Purely visual (no text sits "on" a shadow), so this doesn't
     touch any of the contrast ratios documented above. */
  --shadow-xs: 0 1px 2px rgba(32, 30, 29, 0.04);
  --shadow-sm: 0 2px 6px -1px rgba(32, 30, 29, 0.08), 0 1px 2px rgba(32, 30, 29, 0.05);
  --shadow-md: 0 12px 28px -8px rgba(32, 30, 29, 0.16), 0 2px 6px -2px rgba(32, 30, 29, 0.06);
  --shadow-lg: 0 24px 56px -16px rgba(32, 30, 29, 0.28), 0 8px 16px -8px rgba(32, 30, 29, 0.10);

  --radius-xs: 6px;     /* NEW — smallest controls (reserved for next polish pass) */
  --radius-sm: 8px;     /* CHANGED from 4px — Stripe-soft corners on buttons/inputs/tags/badges */
  --radius: 12px;       /* CHANGED from 8px — cards, kpi tiles, dropdown menus */
  --radius-lg: 16px;    /* NEW — elevated overlays (modal, login card) read a step softer/bigger
                            than in-page cards, matching Stripe's modal treatment */
  --font: "Figtree", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* ---- Spacing scale (4px grid). Not theme-dependent, so unlike the color tokens above these
     don't need dark-mode counterparts — they're geometry, not color. ---- */
  --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;

  /* ---- Type scale / tracking / leading. Also not theme-dependent. ---- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 0.95rem;    /* ~15px — default body/UI copy */
  --text-lg: 1.05rem;    /* ~17px — card/modal headings */
  --text-xl: 1.3rem;     /* ~21px — page (topbar) heading */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */

  --tracking-tight: -0.02em;  /* large numerals, KPI values */
  --tracking-snug: -0.01em;   /* headings */
  --tracking-wide: 0.04em;    /* small uppercase labels */
  --tracking-wider: 0.05em;   /* table headers, eyebrow labels */
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---- Motion. Not theme-dependent. --ease-spring for anything the user directly pokes
     (buttons, nav selection, checkboxes) — a slight overshoot reads as tactile, like iOS/macOS
     control feedback. --ease-out for content appearing on its own (tabs, modals, toasts) —
     a spring there reads as bouncy/toy-like instead of tactile. ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;

  /* ---- Barra lateral. Antes estaba hardcodeada en style.css y era la misma en los dos temas,
     lo que en modo oscuro la dejaba fuera de la paleta: casi gris (saturación 4.9%) contra un
     fondo marrón cálido (20%), y a la misma luminosidad que las tarjetas, así que se leía como
     panel elevado en vez de riel. Ahora es un token por tema. En modo claro conserva los valores
     originales; el modo oscuro la integra a la familia cálida. ---- */
  --sidebar-bg: #201e1d;
  --sidebar-text: #cfcbc8;         /* 10.30:1 sobre --sidebar-bg */
  --sidebar-sub: #9c9895;          /* 5.80:1 — subtítulo del wordmark */
  --sidebar-caret: #8f8b88;        /* 4.91:1 — caret del selector de contexto */
}

/* Dark tokens, path 1: system preference, no explicit user choice stored */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #efece8;
    --text: var(--ink);
    --bg: #1b1712;
    --card-bg: #262019;

    /* Rampa neutra CÁLIDA (hue 30°, saturación 16%→9%). Antes era casi gris (~5%), lo que la
       dejaba en otra familia que --bg/--card-bg (~20%) y hacía que bordes y superficies se
       leyeran fríos sobre el fondo marrón. Se conservó la luminosidad exacta de cada escalón,
       así que todos los contrastes se mantienen o suben levemente (ver valores al lado). */
    --n-100: #2e2821;
    --n-200: #3b332b;
    --n-300: #4c433a;
    --n-400: #6e6256;
    --n-500: #95897d;
    --n-600: #aaa29a;

    --border: var(--n-200);
    --border-strong: var(--n-500);   /* 4.72:1 vs --card-bg — clears 3:1 */
    --muted: var(--n-600);           /* 6.40:1 vs --card-bg */
    --sidebar-bg: #181410;           /* hue 30°, sat 20%, lum 7.8% — misma familia que --bg
                                         (#1b1712), y un escalón POR DEBAJO para que la escalera
                                         lea barra < página < tarjeta. */
    --sidebar-text: #d3cec6;         /* 11.70:1 sobre --sidebar-bg */
    --sidebar-sub: #a09a91;          /* 6.56:1 */
    --sidebar-caret: #948d84;        /* 5.58:1 */

    --muted-2: var(--n-500);         /* CHANGED from --n-400 (2.69:1 vs --card-bg — fails the 3:1
                                         non-text minimum, e.g. .btn-secondary:hover border) to
                                         --n-500 (4.75:1), matching light mode where --muted-2 was
                                         already --n-500. Kept for placeholders/disabled text (no
                                         AA text requirement there); do NOT use for real label/body
                                         text — see --muted for that (used by .cal-dow,
                                         .context-menu-label, .brand-block-total.zero). */
    --muted-3: var(--n-300);

    /* Terracota (rebranding "Opción C"). --accent stays the same value as light mode (#c1502e,
       4.71:1 under white button text) instead of a brighter dark-surface tint: a lighter terracota
       like #d97a54 only clears 3.06:1 under white text, which fails AA for button labels. */
    --accent: #c1502e;
    --accent-hover: #93381c;
    --accent-dark: var(--accent-hover);
    --accent-bright: #e08a63;        /* Decorative-only tint, 6.13:1 vs --card-bg — plenty for the
                                         3:1 non-text minimum (icons, chart bars, kpi top-bar). */
    --accent-text: #e08a63;          /* 6.13:1 vs --card-bg — required because --accent (#c1502e)
                                         as plain text on dark bg is under 4.5:1. */
    --accent-soft: #3a2418;
    --accent-soft-strong: #4a2f1e;
    --accent-soft-text: var(--accent-text); /* 5.52:1 vs --accent-soft here. */

    --status-complete: #4ecb82;      /* brightened for dark surfaces, same idea as --accent-bright */
    --status-complete-soft: #163823;
    --status-complete-text: var(--status-complete);
    --status-upcoming: #5aa9e6;
    --status-upcoming-soft: #132a3a;
    --status-upcoming-text: var(--status-upcoming);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 14px 32px -10px rgba(0, 0, 0, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 28px 64px -18px rgba(0, 0, 0, 0.65), 0 10px 20px -8px rgba(0, 0, 0, 0.45);
  }
}

/* Dark tokens, path 2: explicit user choice, wins over system preference either way */
:root[data-theme="dark"] {
  --ink: #efece8;
  --text: var(--ink);
  --bg: #1b1712;
  --card-bg: #262019;

  /* Rampa neutra cálida — ver el comentario del bloque prefers-color-scheme de arriba. */
  --n-100: #2e2821;
  --n-200: #3b332b;
  --n-300: #4c433a;
  --n-400: #6e6256;
  --n-500: #95897d;
  --n-600: #aaa29a;

  --sidebar-bg: #181410;
  --sidebar-text: #d3cec6;
  --sidebar-sub: #a09a91;
  --sidebar-caret: #948d84;

  --border: var(--n-200);
  --border-strong: var(--n-500);
  --muted: var(--n-600);
  --muted-2: var(--n-500);          /* CHANGED from --n-400 — see matching comment in the
                                        prefers-color-scheme block above. */
  --muted-3: var(--n-300);

  --accent: #c1502e;
  --accent-hover: #93381c;
  --accent-dark: var(--accent-hover);
  --accent-bright: #e08a63;
  --accent-text: #e08a63;
  --accent-soft: #3a2418;
  --accent-soft-strong: #4a2f1e;
  --accent-soft-text: var(--accent-text);

  --status-complete: #4ecb82;
  --status-complete-soft: #163823;
  --status-complete-text: var(--status-complete);
  --status-upcoming: #5aa9e6;
  --status-upcoming-soft: #132a3a;
  --status-upcoming-text: var(--status-upcoming);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 32px -10px rgba(0, 0, 0, 0.55), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 28px 64px -18px rgba(0, 0, 0, 0.65), 0 10px 20px -8px rgba(0, 0, 0, 0.45);
}