/* ============================================================
   TOKENS.CSS — Design System Custom Properties
   "The Daylight Kinetic" design system for Laser Tag 2 U
   ============================================================ */

:root {

  /* ── Color Palette ──────────────────────────────────────── */
  --color-accent:          #cafd00;
  --color-accent-dark:     #a8d400;
  --color-accent-dim:      #beee00;
  --color-accent-muted:    #e8fe80;
  --color-accent-tint:     rgba(202, 253, 0, 0.08);

  --color-surface:         #f5f6f7;
  --color-surface-low:     #eff1f2;
  --color-surface-mid:     #e6e8ea;
  --color-surface-high:    #ffffff;

  --color-ink:             #2c2f30;
  --color-ink-muted:       #5a6068;
  --color-ink-faint:       #9aa0a6;

  --color-nav-glass:       rgba(245, 246, 247, 0.85);
  --color-overlay:         rgba(44, 47, 48, 0.72);
  --color-modal-overlay:   rgba(44, 47, 48, 0.60);

  /* Semantic aliases */
  --color-cta-bg:          var(--color-accent);
  --color-cta-text:        var(--color-ink);
  --color-page-bg:         var(--color-surface);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:             'Space Grotesk', system-ui, -apple-system, sans-serif;

  --tracking-hero:         -0.04em;
  --tracking-display:      -0.03em;
  --tracking-tight:        -0.02em;
  --tracking-normal:        0em;
  --tracking-wide:          0.04em;
  --tracking-widest:        0.08em;

  /* Fluid type scale */
  --text-xs:    clamp(0.75rem,   0.72rem  + 0.15vw,  0.8125rem);
  --text-sm:    clamp(0.875rem,  0.83rem  + 0.22vw,  0.9375rem);
  --text-base:  clamp(1rem,      0.96rem  + 0.2vw,   1.0625rem);
  --text-lg:    clamp(1.125rem,  1.05rem  + 0.38vw,  1.25rem);
  --text-xl:    clamp(1.25rem,   1.1rem   + 0.75vw,  1.5rem);
  --text-2xl:   clamp(1.5rem,    1.25rem  + 1.25vw,  2rem);
  --text-3xl:   clamp(1.875rem,  1.4rem   + 2.4vw,   2.75rem);
  --text-4xl:   clamp(2.25rem,   1.6rem   + 3.25vw,  3.75rem);
  --text-5xl:   clamp(3rem,      2rem     + 5vw,     5.5rem);
  --text-hero:  clamp(3.25rem,   2rem     + 6.25vw,  7rem);

  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;
  --weight-extrabold:      800;

  --leading-none:          1;
  --leading-tight:         1.1;
  --leading-snug:          1.25;
  --leading-normal:        1.5;
  --leading-relaxed:       1.65;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;
  --space-40:   10rem;
  --space-48:   12rem;

  /* Section vertical rhythm (fluid) */
  --section-gap:       clamp(4rem, 7vw, 9rem);
  --section-gap-sm:    clamp(2.5rem, 4vw, 5rem);
  --section-gap-lg:    clamp(6rem, 10vw, 12rem);

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-wide:    1400px;
  --container-narrow:  760px;
  --container-pad:     clamp(1.25rem, 5vw, 2.5rem);

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-xs:   0.1875rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-2xl:  3rem;
  --radius-pill: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:     0 1px 2px rgba(44, 47, 48, 0.06);
  --shadow-sm:     0 1px 3px rgba(44, 47, 48, 0.08), 0 1px 2px rgba(44, 47, 48, 0.05);
  --shadow-md:     0 4px 16px rgba(44, 47, 48, 0.10), 0 2px 6px rgba(44, 47, 48, 0.06);
  --shadow-lg:     0 12px 40px rgba(44, 47, 48, 0.12), 0 4px 12px rgba(44, 47, 48, 0.07);
  --shadow-xl:     0 20px 60px rgba(44, 47, 48, 0.14), 0 8px 20px rgba(44, 47, 48, 0.08);
  --shadow-accent: 0 4px 24px rgba(202, 253, 0, 0.45), 0 2px 8px rgba(202, 253, 0, 0.25);
  --shadow-ambient: 0 20px 40px rgba(44, 47, 48, 0.06);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-linear:   linear;

  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-enter:   600ms;
  --duration-reveal:  700ms;

  /* ── Nav ────────────────────────────────────────────────── */
  --nav-height:        72px;
  --nav-height-sm:     60px;
  --nav-blur:          24px;
  --nav-z:             100;

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --z-below:           -1;
  --z-base:             0;
  --z-raised:          10;
  --z-nav:            100;
  --z-modal:          200;
  --z-toast:          300;
}