/* ============================================================
   Quantic Vacaciones · Design Tokens
   Sistema de diseño "Soft Structuralism" on-brand (azul Quantic).
   ============================================================ */
:root {
  /* — Marca (azul/cian Quantic) — */
  --brand-50:  #EAF4FF;
  --brand-100: #D6E9FF;
  --brand-200: #AED4FF;
  --brand-300: #7FBBFF;
  --brand-400: #4A9DFF;
  --brand-500: #0B84FF;   /* primario */
  --brand-600: #0A6FE0;
  --brand-700: #0A59B4;
  --brand-800: #0B4486;
  --cyan-400:  #22C0FF;
  --brand-grad: linear-gradient(135deg, #0B84FF 0%, #22C0FF 100%);
  --brand-grad-soft: linear-gradient(135deg, #1E90FF 0%, #38CFFF 100%);

  /* — Tinta / texto — */
  --ink:    #0A1726;
  --ink-2:  #2A3B50;
  --muted:  #5C6B7E;
  --faint:  #93A1B3;

  /* — Superficies — */
  --bg:        #E9EFF7;
  --bg-2:      #EEF3FA;
  --surface:   #FFFFFF;
  --surface-2: #F5F9FD;
  --shell:     #EFF4FA;   /* bisel exterior (doppelrand) */

  /* — Líneas / hairlines — */
  --line:        rgba(10, 23, 38, 0.08);
  --line-2:      rgba(10, 23, 38, 0.12);
  --line-strong: rgba(10, 23, 38, 0.18);
  --line-white:  rgba(255, 255, 255, 0.65);

  /* — Semánticos — */
  --success:    #15A34A;
  --success-bg: #E6F6EC;
  --success-line: #B8E6C7;
  --warn:       #C2780C;
  --warn-bg:    #FDF1DD;
  --warn-line:  #F3D9A6;
  --danger:     #DC2626;
  --danger-bg:  #FCEBEB;
  --danger-line:#F5C9C9;
  --info:       #0B84FF;
  --info-bg:    #EAF4FF;

  /* — Estados de vacaciones — */
  --st-aprobado:   #15A34A;
  --st-pendiente:  #C2780C;
  --st-rechazado:  #94A3B8;

  /* — Radios — */
  --r-2xl: 30px;
  --r-xl:  24px;
  --r-lg:  18px;
  --r-md:  13px;
  --r-sm:  9px;
  --r-pill: 999px;
  --bezel: 6px;          /* padding del bisel exterior */

  /* — Sombras (suaves, difusas, con ambiente azul) — */
  --shadow-xs: 0 1px 2px rgba(10, 23, 38, 0.05);
  --shadow-sm: 0 2px 10px -3px rgba(10, 23, 38, 0.10);
  --shadow-md: 0 12px 30px -14px rgba(12, 38, 74, 0.20);
  --shadow-lg: 0 30px 70px -28px rgba(12, 40, 82, 0.28);
  --shadow-brand: 0 18px 42px -16px rgba(11, 132, 255, 0.45);
  --inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --ring-focus: 0 0 0 4px rgba(11, 132, 255, 0.20);

  /* — Tipografía — */
  --font-display: "Clash Display", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* — Espaciado — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-12: 104px;

  /* — Movimiento — */
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.18s;
  --dur-2: 0.36s;
  --dur-3: 0.6s;
  --dur-4: 0.8s;

  /* — Capas — */
  --z-grain: 5;
  --z-nav: 100;
  --z-bubble: 160;
  --z-overlay: 200;
  --z-modal: 210;
  --z-toast: 320;

  /* — Layout — */
  --maxw: 1640px;
  --nav-h: 64px;
}