/* ================================================================
   VARIABLES.CSS — Global Design Tokens
   Single source of truth for CSS custom properties used across the
   shared app/guest/print layouts. Loaded before verticz.css.
   Migrated from verticz.css "1. DESIGN TOKENS" block — values unchanged.
   ================================================================ */

:root {
  --bg:         #070707;
  --bg-alt:     #070C1A;
  --bg-card:    rgba(255,255,255,0.03);
  --bg-subtle:  rgba(255,255,255,0.02);
  --bg-mid:     rgba(255,255,255,0.05);

  --border:     rgba(255,255,255,0.07);
  --border-md:  rgba(255,255,255,0.1);
  --border-lg:  rgba(255,255,255,0.15);

  --t1:  #fff;
  --t2:  rgba(255,255,255,0.82);
  --t3:  rgba(255,255,255,0.65);
  --t4:  rgba(255,255,255,0.45);
  --t5:  rgba(255,255,255,0.28);
  --t6:  rgba(255,255,255,0.38);

  --lime:       #B7FF2A;
  --lime-bg:    rgba(183,255,42,0.12);
  --lime-bd:    rgba(183,255,42,0.25);

  --cyan:       #00E5FF;
  --cyan-bg:    rgba(0,229,255,0.12);
  --cyan-bd:    rgba(0,229,255,0.25);

  --purple:     #8B5CFF;
  --purple-bg:  rgba(139,92,255,0.12);
  --purple-bd:  rgba(139,92,255,0.25);

  --green:      #22C55E;
  --green-bg:   rgba(34,197,94,0.12);
  --green-bd:   rgba(34,197,94,0.25);

  --amber:      #FFB547;
  --amber-bg:   rgba(255,181,71,0.12);
  --amber-bd:   rgba(255,181,71,0.25);

  --orange:     #F97316;
  --orange-bg:  rgba(249,115,22,0.12);
  --orange-bd:  rgba(249,115,22,0.25);

  --red:        #EF4444;
  --red-bg:     rgba(239,68,68,0.12);
  --red-bd:     rgba(239,68,68,0.25);

  --grad:       linear-gradient(135deg,#B7FF2A,#00E5FF);

  /* ── RGBA ALPHA RAMP (color audit — reduced from ~250 raw rgba() values
     across verticz.css/pages/custom.css to 4 kept alpha steps per color
     family). Where a kept step exactly matches an existing token above
     (every family's 0.25 step matches its "-bd" token; white's 0.05/0.1
     match --bg-mid/--border-md; white's 1 matches --t1), that existing
     token is reused instead of duplicating it here — only genuinely new
     steps get a new variable. ── */
  --white-a35:  rgba(255,255,255,0.35);

  --lime-a10:   rgba(183,255,42,0.1);
  --lime-a15:   rgba(183,255,42,0.15);
  --lime-a60:   rgba(183,255,42,0.6);
  --lime-a80:   rgba(183,255,42,0.8);

  --purple-a10: rgba(139,92,255,0.1);
  --purple-a45: rgba(139,92,255,0.45);
  --purple-a95: rgba(139,92,255,0.95);

  --green-a05:  rgba(34,197,94,0.05);
  --green-a85:  rgba(34,197,94,0.85);
  --green-a100: rgba(34,197,94,1);

  --amber-a10:  rgba(255,181,71,0.1);
  --amber-a50:  rgba(255,181,71,0.5);
  --amber-a100: rgba(255,181,71,1);

  --red-a10:    rgba(239,68,68,0.1);
  --red-a62:    rgba(239,68,68,0.62);
  --red-a100:   rgba(239,68,68,1);

  --cyan-a10:   rgba(0,229,255,0.1);
  --cyan-a78:   rgba(0,229,255,0.78);
  --cyan-a80:   rgba(0,229,255,0.8);

  --orange-a15: rgba(249,115,22,0.15);
  --orange-a82: rgba(249,115,22,0.82);
  --orange-a100:rgba(249,115,22,1);

  --black-a15:  rgba(0,0,0,0.15);
  --black-a25:  rgba(0,0,0,0.25);
  --black-a50:  rgba(0,0,0,0.5);
  --black-a65:  rgba(0,0,0,0.65);

  --amber2:     #F59E0B;
  --amber2-a05: rgba(245,158,11,0.05);
  --amber2-a15: rgba(245,158,11,0.15);
  --amber2-a20: rgba(245,158,11,0.2);
  --amber2-a30: rgba(245,158,11,0.3);

  /* ── HEX COLORS (color audit shortlist — genuinely distinct hex values
     beyond the base family colors above; excludes near-duplicate/one-off
     values already covered by an existing token) ── */
  --dark-navy:    #1A1A2E;
  --dark-green:   #0D1A0A;

  --gray-1:       #555;
  --gray-2:       #888;
  --gray-3:       #AAA;
  --gray-light:   #EEE;

  --lime-2:       #C5FF4A;
  --green-400:    #4ADE80;
  --green-600:    #16A34A;
  --emerald-200:  #A7F3D0;
  --green-100:    #DCFCE7;

  --orange-700:   #C2410C;
  --orange-100:   #FFEDD5;
  --amber-700:    #B45309;
  --amber-400:    #FBBF24;
  --amber-100:    #FEF3C7;

  --indigo-600:   #4F46E5;

  --red-600:      #DC2626;
  --red-100:      #FEE2E2;

  /* ── FONT WEIGHT ── */
  --fw-regular:   400; /* body text */
  --fw-medium:    500; /* secondary labels */
  --fw-semibold:  600; /* form labels, table headers */
  --fw-bold:      700; /* headings, emphasis (most used) */
  --fw-extrabold: 800; /* large KPI numbers */
  --fw-black:     900; /* max emphasis */

  /* ── FONT SIZE (even px only, 10px minimum) ── */
  --fs-10: 10px; /* micro labels */
  --fs-12: 12px; /* small labels/meta text */
  --fs-14: 14px; /* body text (most used) */
  --fs-16: 16px; /* base/paragraph */
  --fs-18: 18px; /* subheadings */
  --fs-20: 20px; /* card titles */
  --fs-22: 22px; /* section headings */
  --fs-24: 24px; /* large stat values */
  --fs-26: 26px; /* small display numbers */
  --fs-28: 28px; /* KPI numbers */
  --fs-32: 32px; /* large headings */
  --fs-34: 34px; /* hero numbers */
  --fs-36: 36px; /* max display size */

  /* fluid headings — min/preferred/max split so each part can be tuned on its own */
  --fs-fluid-sm-min: 28px;  --fs-fluid-sm-pref: 3vw;  --fs-fluid-sm-max: 44px;
  --fs-fluid-md-min: 28px;  --fs-fluid-md-pref: 3vw;  --fs-fluid-md-max: 48px;
  --fs-fluid-lg-min: 40px;  --fs-fluid-lg-pref: 5vw;  --fs-fluid-lg-max: 72px;

  --fs-fluid-sm: clamp(var(--fs-fluid-sm-min), var(--fs-fluid-sm-pref), var(--fs-fluid-sm-max));
  --fs-fluid-md: clamp(var(--fs-fluid-md-min), var(--fs-fluid-md-pref), var(--fs-fluid-md-max));
  --fs-fluid-lg: clamp(var(--fs-fluid-lg-min), var(--fs-fluid-lg-pref), var(--fs-fluid-lg-max));

  /* ── SPACING (padding/margin/gap) ── */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-60: 60px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;
  --sp-100: 100px;
  --sp-120: 120px;
  --sp-185: 185px;

  /* ── POSITION (top/left/right/bottom offsets) ──
     magnitude only — for negative offsets use calc(var(--pos-*) * -1) at the usage site */
  --pos-4:  4px;
  --pos-6:  6px;
  --pos-8:  8px;
  --pos-12: 12px;
  --pos-16: 16px;
  --pos-20: 20px;
  --pos-22: 22px;
  --pos-24: 24px;
  --pos-28: 28px;
  --pos-30: 30px;
  --pos-34: 34px;
  --pos-215: 215px; /* sidebar-closed offscreen offset (fixes invalid "left: -215 px" typo) */

  /* ── BORDER RADIUS (3-variable system) ── */
  --br-inner: 8px;    /* small/nested elements — icon boxes, tooltips, small buttons, thin bars */
  --br-outer: 24px;   /* containers — cards, modals, section headers, panels */
  --br-full: 9999px;  /* pill/fully-rounded shapes — badges, tags, chips, pill buttons */

  /* ── LINE HEIGHT ── */
  --lh-base: 1.5; /* body element only — all other line-height rules commented out for review */

  /* ── LETTER SPACING ── */
  --ls-base: 0; /* body element only — all other letter-spacing rules commented out for review */

  /* ── TRANSITION DURATION ── */
  --t-fast:    0.15s;
  --t-default: 0.25s;
  --t-medium:  0.35s;
  --t-slow:    0.45s;
}


/* md (768px-991.98px) — tablet: shift 1 step down the scale
   (floored at 12px — non-badge text must never read below 12px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --fs-12: 12px;
    --fs-14: 12px;
    --fs-16: 14px;
    --fs-18: 16px;
    --fs-20: 18px;
    --fs-22: 20px;
    --fs-24: 22px;
    --fs-26: 24px;
    --fs-28: 26px;
    --fs-32: 28px;
    --fs-34: 32px;
    --fs-36: 34px;

    --sp-8:  4px;
    --sp-10: 8px;
    --sp-12: 10px;
    --sp-14: 12px;
    --sp-16: 14px;
    --sp-20: 16px;
    --sp-24: 20px;
    --sp-28: 24px;
    --sp-32: 28px;
    --sp-40: 32px;
    --sp-60: 40px;
    --sp-64: 60px;
    --sp-80: 64px;
    --sp-96: 80px;
    --sp-100: 96px;
    --sp-120: 100px;
    --sp-185: 120px;

    --pos-8:  6px;
    --pos-12: 8px;
    --pos-16: 12px;
    --pos-20: 16px;
    --pos-22: 20px;
    --pos-24: 22px;
    --pos-28: 24px;
    --pos-30: 28px;
    --pos-34: 30px;

    --br-outer: 20px;
  }
}

/* sm (576px-767.98px) — shift 2 steps down the scale
   (floored at 12px — non-badge text must never read below 12px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --fs-12: 12px;
    --fs-14: 12px;
    --fs-16: 12px;
    --fs-18: 14px;
    --fs-20: 16px;
    --fs-22: 18px;
    --fs-24: 20px;
    --fs-26: 22px;
    --fs-28: 24px;
    --fs-32: 26px;
    --fs-34: 28px;
    --fs-36: 32px;

    --sp-8:  2px;
    --sp-10: 4px;
    --sp-12: 8px;
    --sp-14: 10px;
    --sp-16: 12px;
    --sp-20: 14px;
    --sp-24: 16px;
    --sp-28: 20px;
    --sp-32: 24px;
    --sp-40: 28px;
    --sp-60: 32px;
    --sp-64: 40px;
    --sp-80: 60px;
    --sp-96: 64px;
    --sp-100: 80px;
    --sp-120: 96px;
    --sp-185: 100px;

    --pos-8:  4px;
    --pos-12: 6px;
    --pos-16: 8px;
    --pos-20: 12px;
    --pos-22: 16px;
    --pos-24: 20px;
    --pos-28: 22px;
    --pos-30: 24px;
    --pos-34: 28px;

    --br-outer: 18px;
  }
}

/* xs (≤575.98px) — shift 3 steps down the scale
   (floored at 12px — non-badge text must never read below 12px) */
@media (max-width: 575.98px) {
  :root {
    --fs-12: 12px;
    --fs-14: 12px;
    --fs-16: 12px;
    --fs-18: 12px;
    --fs-20: 14px;
    --fs-22: 16px;
    --fs-24: 18px;
    --fs-26: 20px;
    --fs-28: 22px;
    --fs-32: 24px;
    --fs-34: 26px;
    --fs-36: 28px;

    --sp-8:  2px;
    --sp-10: 4px;
    --sp-12: 6px;
    --sp-14: 8px;
    --sp-16: 10px;
    --sp-20: 12px;
    --sp-24: 14px;
    --sp-28: 16px;
    --sp-32: 20px;
    --sp-40: 24px;
    --sp-60: 28px;
    --sp-64: 32px;
    --sp-80: 40px;
    --sp-96: 60px;
    --sp-100: 64px;
    --sp-120: 80px;
    --sp-185: 96px;

    --pos-8:  4px;
    --pos-12: 4px;
    --pos-16: 6px;
    --pos-20: 8px;
    --pos-22: 12px;
    --pos-24: 16px;
    --pos-28: 20px;
    --pos-30: 22px;
    --pos-34: 24px;

    --br-outer: 16px;
  }
}