/* ══════════════════════════════════════════════════
   EVENTOLOGY DESIGN SYSTEM · TOKENS
   Ported from brand.eventology.me. This project is dark-theme
   only (no theme switcher), so only the dark :root values are
   included — see project memory for the light-theme block if
   that decision ever changes.
   ══════════════════════════════════════════════════ */

:root{
  --v:#93278F;--vl:#B44DB0;--vd:#6B1A69;
  --a:#1F93FF;--al:#5BB3FF;--ad:#0A6FCC;
  --sl:#606060;--sl2:#909090;
  --ok:#00C878;--warn:#F59E0B;--err:#F04040;
  --c0:#05050C;--c1:#0A0A14;--c2:#10101E;--c3:#181828;--c4:#202032;
  /* ── TEXT COLORS ── boosted for contrast on dark backgrounds */
  --txt:#EEEEF8;               /* primary — near white */
  --t2:rgba(238,238,248,0.78); /* secondary — clearly visible */
  --t3:rgba(238,238,248,0.52); /* muted — still readable at 13px+ */
  --t4:rgba(238,238,248,0.10); /* ghost fill only, not text */
  --bd:rgba(255,255,255,0.16);
  --bd2:rgba(255,255,255,0.28);
  --knob:#fff;
  --gr:linear-gradient(110deg,#93278F,#5544BB,#1F93FF);
  --fd:'Big Shoulders Display',sans-serif;
  --fb:'DM Sans',sans-serif;
  --fm:'Manrope',sans-serif;
  /* ── Focus ring ── */
  --focus-ring:2px solid #1F93FF;
  --focus-ring-subtle:2px solid var(--a-60);
  --focus-offset:3px;
  --focus-offset-flush:0px;
  --touch-target:44px;
  /* ── Z-index scale ── named layers, 10 apart, so a new layer can be
     inserted without renumbering everything above it. */
  --z-base:0;
  --z-sticky:10;
  --z-dropdown:20;
  --z-overlay:30;
  --z-modal:40;
  --z-toast:50;
  --z-tooltip:60;
  --z-cursor:9999;
  --z-cursor-ring:9998;
  --container-max:1440px;
  /* ── Content inset ── fluid outer padding matching the header's outer padding.
     Use on every section wrap: padding-inline:var(--content-inset) */
  --content-inset:clamp(1.2rem, 3.2vw, 3.2rem);
  /* ── Spacing scale ── named sm/md/lg per size, not per pixel value */
  --space-1:.4rem;  /* 4px  — tight inline gaps */
  --space-2:.8rem;  /* 8px  — sm component padding */
  --space-3:1.2rem; /* 12px — default grid/flex gaps */
  --space-4:1.6rem; /* 16px — md component padding */
  --space-5:2.4rem; /* 24px — lg component padding, card padding */
  --space-6:3.2rem; /* 32px — section-internal spacing */
  --space-7:4.8rem; /* 48px — between major blocks */
  --space-8:7.2rem; /* 72px — chapter-level padding */
  /* ── Border radius scale ── */
  --radius-sm:10px;  /* tags, checkboxes, thin bars/dividers */
  --radius-md:15px;  /* buttons, inputs, avatars, icon chips */
  --radius-lg:20px;  /* cards, panels, menus, notifications */
  --radius-pill:999px;
  --radius-full:50%;
  /* ── Icon size scale ── */
  --icon-xs:16px;
  --icon-sm:20px;
  --icon-md:22px;
  --icon-lg:24px;
  --icon-xl:32px;
  --icon-2xl:48px;
  /* ── Aspect ratio tokens ── */
  --ratio-hero:16/9;
  --ratio-card:4/3;
  --ratio-thumb:1/1;
  --ratio-portrait:2/3;
  --ratio-video:16/9;
  --ratio-badge:5/7;
  /* ── Shadows ── */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:0 4px 16px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.40);
  /* ── Glows ── */
  --glow-violet:0 0 0 1px rgba(147,39,143,0.50), 0 0 20px rgba(147,39,143,0.25), 0 0 60px rgba(147,39,143,0.10);
  --glow-azure:0 0 0 1px rgba(31,147,255,0.50), 0 0 20px rgba(31,147,255,0.22), 0 0 60px rgba(31,147,255,0.08);
  --glow-brand:0 0 0 1px rgba(147,39,143,0.35), 0 0 30px rgba(147,39,143,0.20), 0 0 60px rgba(31,147,255,0.12), 0 8px 32px rgba(0,0,0,0.50);
  --glow-error:0 0 0 1px rgba(240,64,64,0.50), 0 0 20px rgba(240,64,64,0.20), 0 0 50px rgba(240,64,64,0.08);
  --glow-white:0 0 0 2px rgba(255,255,255,0.36), 0 0 40px rgba(255,255,255,0.20), 0 0 100px rgba(255,255,255,0.08);
  /* ── Tint scale ── naming: --<base>-<alpha-as-integer-percent> */
  --v-10:rgba(147,39,143,0.1);
  --v-12:rgba(147,39,143,0.12);
  --v-20:rgba(147,39,143,0.2);
  --v-30:rgba(147,39,143,0.3);
  --a-10:rgba(31,147,255,0.1);
  --a-15:rgba(31,147,255,0.15);
  --a-20:rgba(31,147,255,0.2);
  --a-25:rgba(31,147,255,0.25);
  --a-30:rgba(31,147,255,0.3);
  --a-35:rgba(31,147,255,0.35);
  --a-60:rgba(31,147,255,0.6);
  --ok-10:rgba(0,200,120,0.1);
  --ok-20:rgba(0,200,120,0.2);
  --warn-10:rgba(245,158,11,0.1);
  --err-10:rgba(240,64,64,0.1);
  --err-20:rgba(240,64,64,0.2);
  --err-30:rgba(240,64,64,0.3);
  --c0-65:rgba(5,5,12,0.65);
}