/* ============================================================
   PHASE-19 STUDIOS — Design tokens
   ============================================================ */

:root {
  /* ── Paleta ── */
  --ink-black:    #080A13;
  --deep-navy:    #0C164F;
  --persian-blue: #1431D1;
  --blue-violet:  #962CDD;
  --hot-fuchsia:  #F71C60;
  --turquoise:    #00F0DE;
  --alice-blue:   #EDF3FF;
  --raspberry:    #E12758;

  /* ── Calendario ── */
  --cal-free:      var(--alice-blue);
  --cal-partial:   #FFA500;
  --cal-full:      var(--raspberry);
  --cal-off-hours: #4A4A5A;
  --cal-today:     var(--turquoise);

  /* ── Tipografía ── */
  --font-display: 'Orbitron', 'Segoe UI', monospace;
  --font-ui:      'JetBrains Mono', 'Courier New', monospace;
  --font-accent:  'Bebas Neue', Impact, sans-serif;

  /* ── Escala tipográfica ── */
  --text-xs:   0.625rem;  /* 10px */
  --text-sm:   0.75rem;   /* 12px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3.5rem;    /* 56px */
  --text-hero: clamp(2.5rem, 5vw, 4.5rem);

  /* ── Espaciado ── */
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Bordes ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Header ── */
  --header-height: 64px;

  /* ── Transiciones ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --t-fast:    120ms var(--ease-out);
  --t-mid:     250ms var(--ease-out);
  --t-slow:    500ms var(--ease-out);

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow-raspberry:  0 0 24px rgba(225,39,88,0.35);
  --shadow-glow-turquoise:  0 0 24px rgba(0,240,222,0.35);
  --shadow-glow-violet:     0 0 24px rgba(150,44,221,0.35);

  /* ── Dotted grid ── */
  --dot-light:  url("data:image/svg+xml,%3Csvg width='45' height='45' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='rgba(237%2C243%2C255%2C0.20)'/%3E%3C/svg%3E");
  --dot-mid:    url("data:image/svg+xml,%3Csvg width='45' height='45' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='rgba(237%2C243%2C255%2C0.15)'/%3E%3C/svg%3E");
  --dot-dark:   url("data:image/svg+xml,%3Csvg width='45' height='45' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='rgba(8%2C10%2C19%2C0.15)'/%3E%3C/svg%3E");

  /* ── Ventanas ── */
  --win-violet-bg:       #1431D1;
  --win-violet-bar:      #0E2496;
  --win-blue-bg:         #1431D1;
  --win-blue-bar:        #0E2496;
  --win-fuchsia-bg:      #F71C60;
  --win-fuchsia-bar:     #B81449;
  --win-text:            var(--alice-blue);
  --win-text-muted:      rgba(237,243,255,0.6);

  /* ── Z-index ── */
  --z-base:    1;
  --z-sticky:  100;
  --z-popup:   200;
  --z-modal:   300;
  --z-cursor:  9999;
  /* Toasts/avisos: por ENCIMA de cualquier modal (los modales de flujo usan
     valores altos hardcodeados: login 9999, consulta 9000, lightbox 2000). */
  --z-toast:   10000;
}