/* ==========================================================================
   Umbralith — Tokens de diseño
   Base oscura, acentos RGB armónicos y una escala tipográfica y de espaciado
   consistente. Todo el resto del CSS consume estas variables: cambiar la
   identidad visual no requiere tocar componentes.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Superficies ------------------------------------------------------ */
  --bg-void: #07060c;
  --bg: #0a0812;
  --bg-elevated: #100d1c;
  --surface: #141024;
  --surface-2: #1a1430;
  --surface-3: #221a3c;
  --border: #2a2145;
  --border-strong: #3a2f5e;
  --overlay: rgba(6, 4, 12, 0.78);

  /* --- Texto ------------------------------------------------------------ */
  --text: #efecf7;
  --text-soft: #cdc6e0;
  --text-muted: #9b93b8;
  --text-faint: #6d6588;
  --text-on-accent: #0b0714;

  /* --- Acentos ---------------------------------------------------------- */
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --magenta: #ec4899;
  --amber: #f5b642;
  --emerald: #34d399;
  --rose: #fb7185;
  --sky: #60a5fa;
  --indigo: #6366f1;
  --teal: #2dd4bf;
  --orange: #fb923c;
  --lime: #a3e635;
  --fuchsia: #d946ef;
  --slate: #94a3b8;

  --accent: var(--violet);
  --accent-2: var(--cyan);
  --accent-3: var(--magenta);
  --gradient-brand: linear-gradient(115deg, var(--amber) 0%, #a78bfa 48%, #7c3aed 100%);
  --gradient-brand-soft: linear-gradient(115deg, rgba(245, 182, 66, 0.16), rgba(167, 139, 250, 0.18), rgba(124, 58, 237, 0.18));

  /* --- Estados ---------------------------------------------------------- */
  --success: #34d399;
  --warning: #f5b642;
  --danger: #fb7185;
  --info: #60a5fa;

  /* --- Tipografía ------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --fs-xl: clamp(1.45rem, 1.25rem + 1vw, 1.9rem);
  --fs-2xl: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  --fs-3xl: clamp(2.2rem, 1.6rem + 3.2vw, 3.9rem);
  --fs-4xl: clamp(2.6rem, 1.8rem + 4.6vw, 5.2rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* --- Espaciado -------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Radios y sombras ------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(3, 2, 8, 0.6);
  --shadow-md: 0 10px 30px -12px rgba(3, 2, 8, 0.85);
  --shadow-lg: 0 26px 60px -24px rgba(3, 2, 8, 0.9);
  --shadow-glow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 18px 45px -20px rgba(139, 92, 246, 0.55);

  /* --- Movimiento ------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Estructura ------------------------------------------------------- */
  --container: 1220px;
  --container-narrow: 780px;
  --header-h: 68px;
  --radius-card: var(--r-lg);
  --focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.45);
}

/* Paleta por acento: los componentes usan var(--tone) y var(--tone-soft). */
[data-tone="violet"] { --tone: var(--violet); }
[data-tone="cyan"] { --tone: var(--cyan); }
[data-tone="magenta"] { --tone: var(--magenta); }
[data-tone="amber"] { --tone: var(--amber); }
[data-tone="emerald"] { --tone: var(--emerald); }
[data-tone="rose"] { --tone: var(--rose); }
[data-tone="sky"] { --tone: var(--sky); }
[data-tone="indigo"] { --tone: var(--indigo); }
[data-tone="teal"] { --tone: var(--teal); }
[data-tone="orange"] { --tone: var(--orange); }
[data-tone="lime"] { --tone: var(--lime); }
[data-tone="fuchsia"] { --tone: var(--fuchsia); }
[data-tone="slate"] { --tone: var(--slate); }

:root {
  --tone: var(--violet);
}

/* Tema claro opcional: se activa con data-theme="light". Se mantiene oscuro por
   defecto porque la identidad de Umbralith es nocturna, pero el contraste y la
   legibilidad funcionan igual si alguien lo activa. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-void: #f4f2fb;
  --bg: #faf9fe;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f1fc;
  --surface-3: #e9e4f8;
  --border: #ddd6f0;
  --border-strong: #c4b8e4;
  --overlay: rgba(28, 22, 48, 0.5);
  --text: #171226;
  --text-soft: #33294d;
  --text-muted: #5d5480;
  --text-faint: #8b83a8;
  --text-on-accent: #ffffff;
  --shadow-md: 0 10px 30px -14px rgba(46, 36, 84, 0.28);
  --shadow-lg: 0 26px 60px -26px rgba(46, 36, 84, 0.32);
}