/* ============================================================
   BARRA · tokens
   Dirección: escenario de presentación. Fondo casi negro con
   un duotono cobre (café) + acero cian (inox de hospital).
   El cobre es el acento de marca; el cian es la señal de datos.
   ============================================================ */

:root {
  /* ---- Duotono de marca ---- */
  --cobre-100: #FFE7CC;
  --cobre-200: #FFCE9E;
  --cobre-300: #FFB169;
  --cobre-400: #F98F35;
  --cobre-500: #E4720F;
  --cobre-600: #B85708;

  --acero-100: #D9F4FA;
  --acero-200: #A7E6F2;
  --acero-300: #63D2E8;
  --acero-400: #24B8D6;
  --acero-500: #0E93AF;
  --acero-600: #0A6C82;

  /* ---- Semántica de estado (independiente del acento) ---- */
  --ok: #34C97E;
  --aviso: #F5B93B;
  --grave: #FF6B5E;

  /* ---- Escala tipográfica (fluida, base 16) ---- */
  --t-mega: clamp(3.2rem, 11.5vw, 9.5rem);
  --t-xxl: clamp(2.4rem, 6.6vw, 5.2rem);
  --t-xl: clamp(1.9rem, 4.2vw, 3.2rem);
  --t-lg: clamp(1.35rem, 2.4vw, 1.85rem);
  --t-md: 1.0625rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-2xs: 0.6875rem;

  --display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --text: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", "DejaVu Sans Mono", ui-monospace, monospace;

  /* ---- Ritmo y forma ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 72px;
  --sp-9: 112px; --sp-10: 160px;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 34px; --r-full: 999px;

  --shell: min(1240px, 100% - 2 * var(--sp-4));
  --narrow: 62ch;

  /* ---- Curvas y duraciones (una sola familia, tipo keynote) ---- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-in-out: cubic-bezier(0.62, 0.02, 0.28, 1);
  --ease-spring: cubic-bezier(0.34, 1.46, 0.48, 1);
  --d-xs: 140ms; --d-sm: 240ms; --d-md: 420ms; --d-lg: 720ms; --d-xl: 1100ms;

  --z-bg: 0; --z-content: 10; --z-sticky: 40; --z-nav: 60; --z-modal: 80; --z-toast: 90;
}

/* ============================ TEMA OSCURO (por defecto) ============================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #070809;
  --bg-deep: #030405;
  --surface: #101215;
  --surface-2: #171A1E;
  --surface-3: #1F2429;
  --glass: rgba(12, 14, 17, 0.90);
  --glass-line: rgba(255, 255, 255, 0.09);

  --ink: #F4F6F7;
  --ink-2: #A8B0B7;
  --ink-3: #6E767E;
  --ink-inv: #08090A;

  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.20);

  --acc: var(--cobre-400);
  --acc-hi: var(--cobre-300);
  --acc-lo: var(--cobre-600);
  --acc-ink: #180B02;
  --acc-soft: rgba(249, 143, 53, 0.14);

  --data: var(--acero-300);
  --data-soft: rgba(99, 210, 232, 0.13);

  --ok-soft: rgba(52, 201, 126, 0.14);
  --aviso-soft: rgba(245, 185, 59, 0.14);
  --grave-soft: rgba(255, 107, 94, 0.14);

  --halo: radial-gradient(120% 90% at 50% -10%, rgba(249, 143, 53, 0.18) 0%, rgba(36, 184, 214, 0.09) 38%, transparent 72%);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 42%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 18px 44px -22px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 44px 90px -40px rgba(0, 0, 0, 1), 0 4px 14px rgba(0, 0, 0, 0.6);
  --grid-line: rgba(255, 255, 255, 0.035);
}

/* ============================ TEMA CLARO ============================ */
/* Pensado para usarlo de verdad: móvil en una barra con luz de tubo. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F4F5F6;
  --bg-deep: #E8EAEC;
  --surface: #FFFFFF;
  --surface-2: #F7F8F9;
  --surface-3: #EDEFF1;
  --glass: rgba(255, 255, 255, 0.94);
  --glass-line: rgba(9, 12, 15, 0.09);

  --ink: #0C1013;
  --ink-2: #4A535B;
  --ink-3: #78828A;
  --ink-inv: #FFFFFF;

  --line: rgba(9, 12, 15, 0.12);
  --line-2: rgba(9, 12, 15, 0.24);

  --acc: var(--cobre-600);
  --acc-hi: var(--cobre-500);
  --acc-lo: #7C3A05;
  --acc-ink: #FFFFFF;
  --acc-soft: rgba(184, 87, 8, 0.10);

  --data: var(--acero-600);
  --data-soft: rgba(10, 108, 130, 0.10);

  --ok: #157F4E;
  --aviso: #8A5A05;
  --grave: #B3271D;
  --ok-soft: rgba(21, 127, 78, 0.10);
  --aviso-soft: rgba(138, 90, 5, 0.10);
  --grave-soft: rgba(179, 39, 29, 0.09);

  --halo: radial-gradient(120% 90% at 50% -10%, rgba(184, 87, 8, 0.11) 0%, rgba(10, 108, 130, 0.07) 40%, transparent 72%);
  --sheen: linear-gradient(180deg, rgba(9, 12, 15, 0.035), rgba(9, 12, 15, 0) 42%);
  --shadow-1: 0 1px 1px rgba(9, 12, 15, 0.05);
  --shadow-2: 0 14px 34px -20px rgba(9, 12, 15, 0.30), 0 1px 3px rgba(9, 12, 15, 0.06);
  --shadow-3: 0 34px 70px -34px rgba(9, 12, 15, 0.34), 0 2px 8px rgba(9, 12, 15, 0.08);
  --grid-line: rgba(9, 12, 15, 0.045);
}

/* El sistema decide sólo si el usuario no ha tocado el interruptor. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #F4F5F6; --bg-deep: #E8EAEC; --surface: #FFFFFF; --surface-2: #F7F8F9;
    --surface-3: #EDEFF1; --glass: rgba(255,255,255,.94); --glass-line: rgba(9,12,15,.09);
    --ink: #0C1013; --ink-2: #4A535B; --ink-3: #78828A; --ink-inv: #FFFFFF;
    --line: rgba(9,12,15,.12); --line-2: rgba(9,12,15,.24);
    --acc: var(--cobre-600); --acc-hi: var(--cobre-500); --acc-lo: #7C3A05;
    --acc-ink: #FFFFFF; --acc-soft: rgba(184,87,8,.10);
    --data: var(--acero-600); --data-soft: rgba(10,108,130,.10);
    --ok: #157F4E; --aviso: #8A5A05; --grave: #B3271D;
    --ok-soft: rgba(21,127,78,.10); --aviso-soft: rgba(138,90,5,.10); --grave-soft: rgba(179,39,29,.09);
    --halo: radial-gradient(120% 90% at 50% -10%, rgba(184,87,8,.11) 0%, rgba(10,108,130,.07) 40%, transparent 72%);
    --sheen: linear-gradient(180deg, rgba(9,12,15,.035), rgba(9,12,15,0) 42%);
    --shadow-1: 0 1px 1px rgba(9,12,15,.05);
    --shadow-2: 0 14px 34px -20px rgba(9,12,15,.30), 0 1px 3px rgba(9,12,15,.06);
    --shadow-3: 0 34px 70px -34px rgba(9,12,15,.34), 0 2px 8px rgba(9,12,15,.08);
    --grid-line: rgba(9,12,15,.045);
  }
}