/* Jai Five — tokens de diseño. Única fuente de valores. Ver ../../docs/ARQUITECTURA-web.md §9 y ../../brand-brain/03-sistema-de-diseno.md */
:root {
  /* ---- color base ---- */
  --c-noche: #070E22;
  --c-noche-2: #0A1633;
  --c-tejelet: #13306B;
  --c-azul: #2E6BFF;
  --c-azul-israel: #0038B8;
  --c-talit: #F5F7FB;
  --c-blanco: #FFFFFF;
  --c-oro: #E8B84A;
  --c-oro-claro: #F2C863;
  --c-oro-oscuro: #C9952C;
  --c-granada: #E5484D;
  --c-niebla: #9AA6C3;
  --c-tinta: #0B1022;
  --c-gris: #5B6480;
  --c-brasa: #3A2412;
  /* tripletas para alfas: rgb(var(--rgb-oro) / .5) */
  --rgb-oro: 232 184 74;
  --rgb-azul: 46 107 255;
  --rgb-blanco: 255 255 255;
  --rgb-tinta: 11 16 34;
  --rgb-noche: 7 14 34;

  /* ---- gradientes ---- */
  --g-oro: linear-gradient(135deg, #FFF1C1 0%, #F2C863 32%, #C9952C 68%, #F7DC8C 100%);
  --g-noche: linear-gradient(160deg, #16357A 0%, #0A1633 100%);
  --g-holo: linear-gradient(115deg, #CFEFFF 0%, #E6D6FF 28%, #FFF2C2 52%, #CFEFFF 76%, #E6D6FF 100%);

  /* ---- semánticos (banda oscura por defecto) ---- */
  --bg: var(--c-noche);
  --fg: var(--c-blanco);
  --fg-2: var(--c-niebla);
  --surface: linear-gradient(180deg, #112656 0%, #0C1B40 100%);
  --surface-2: rgba(255, 255, 255, .04);
  --hair: rgba(255, 255, 255, .09);
  --hair-strong: rgba(255, 255, 255, .16);
  --accent: var(--c-oro);
  --link: var(--c-azul);

  /* ---- luz (los escribe js/light.js; estos son el reposo = noche 1) ---- */
  --p: 0;
  --light: 0.12;
  --night: 1;
  --bg-a: 7 14 34;
  --bg-b: 10 22 51;
  --bg-c: 19 48 107;
  --glow-a: 0.18;

  /* ---- tipografía ---- */
  --f-lat: 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --f-heb: 'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif;
  --f-serif: 'Fraunces', 'Frank Ruhl Libre', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --fs-display: clamp(48px, 7.6vw, 108px);
  --fs-h2: clamp(36px, 5vw, 68px);
  --fs-h3: clamp(22px, 2.2vw, 28px);
  --fs-lede: clamp(18px, 1.5vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12px;
  --wdth-tight: normal;
  --wdth-mid: normal;

  /* ---- radios por rol ---- */
  --r-badge: 999px;
  --r-btn: 999px;
  --r-control: 12px;
  --r-card: 20px;
  --r-panel: 28px;
  --r-modal: 24px;

  /* ---- sombras ---- */
  --sh-hair: inset 0 0 0 1px rgba(255, 255, 255, .07);
  --sh-top: inset 0 1px 0 rgba(255, 255, 255, .09);
  --sh-soft: 0 10px 30px -14px rgba(0, 0, 0, .45);
  --sh-deep: 0 50px 80px -36px rgba(0, 0, 0, .75);
  --sh-oro: 0 18px 40px -16px rgba(232, 184, 74, .55);

  /* ---- movimiento ---- */
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.3, 1.5, .5, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 220ms;
  --d-base: 450ms;
  --d-slow: 800ms;
  --d-cine: 1400ms;

  /* ---- espaciado y layout ---- */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 168px;
  --wrap: 1240px;
  --gutter: clamp(16px, 5vw, 64px);
  --frame: clamp(8px, 1.2vw, 14px);
  --nav-h: 64px;

  /* ---- capas ---- */
  --z-grain: 30; --z-menorah: 35; --z-nav: 40; --z-drawer: 50; --z-toast: 60;

  color-scheme: dark;
}

/* Banda clara: una sección con .banda-clara invierte los semánticos */
.banda-clara {
  --bg: var(--c-talit);
  --fg: var(--c-tinta);
  --fg-2: var(--c-gris);
  --surface: #FFFFFF;
  --surface-2: rgba(11, 16, 34, .03);
  --hair: rgba(11, 16, 34, .08);
  --hair-strong: rgba(11, 16, 34, .16);
  --sh-hair: inset 0 0 0 1px rgba(11, 16, 34, .06);
  --sh-top: inset 0 1px 0 #FFFFFF;
  --sh-soft: 0 10px 30px -14px rgba(19, 48, 107, .25);
  --sh-deep: 0 50px 90px -50px rgba(19, 48, 107, .35);
  color-scheme: light;
}