/**
 * LOADRYX Design System — Design Tokens
 * Direction: ARENA — esports-forward, violet→cyan on deep ink.
 *
 * Single source of truth for colour, type, space, radius and motion.
 * Nothing below this file may hard-code a colour or a spacing value.
 */

:root {
  /* ---------- Ground and surfaces ---------- */
  --lx-ink-000: #08080f; /* page ground */
  --lx-ink-050: #0b0b16; /* sunken */
  --lx-ink-100: #0e0e1c; /* card surface */
  --lx-ink-200: #111121; /* hover surface */
  --lx-ink-300: #17172e; /* raised */
  --lx-line: #1c1c33;
  --lx-line-soft: #17172a;

  /* ---------- Foreground (contrast vs --lx-ink-000) ---------- */
  --lx-fg: #f2f3f7;      /* 16.8:1 */
  --lx-fg-mid: #9ca0b8;  /* 7.4:1  */
  --lx-fg-dim: #6d7190;  /* 4.6:1  */

  /* ---------- Accent: a two-stop ramp, used as one gesture ---------- */
  --lx-violet: #7c5cff;
  --lx-cyan: #22d3ee;
  --lx-accent: var(--lx-violet);
  --lx-ramp: linear-gradient(92deg, #7c5cff, #22d3ee);
  --lx-ramp-soft: linear-gradient(92deg, rgba(124, 92, 255, 0.16), rgba(34, 211, 238, 0.16));
  --lx-accent-soft: rgba(124, 92, 255, 0.16);
  --lx-accent-line: rgba(124, 92, 255, 0.42);
  --lx-cyan-line: rgba(34, 211, 238, 0.42);
  --lx-on-accent: #07060f; /* 15.1:1 on either ramp stop */

  /* ---------- Semantic — kept off the accent ramp ---------- */
  --lx-ok: #34d399;
  --lx-ok-fg: #6ee7b7;
  --lx-ok-soft: rgba(52, 211, 153, 0.14);
  --lx-warn: #fbbf24;
  --lx-warn-fg: #fcd34d;
  --lx-warn-soft: rgba(251, 191, 36, 0.14);
  --lx-crit: #f87171;
  --lx-crit-fg: #fca5a5;
  --lx-crit-soft: rgba(248, 113, 113, 0.14);
  --lx-info: #60a5fa;
  --lx-info-fg: #93c5fd;
  --lx-info-soft: rgba(96, 165, 250, 0.14);

  /* Flat-accent aliases kept so nothing that reaches for a solid accent
     silently loses its colour. */
  --lx-accent-hover: #9070ff;
  --lx-accent-press: #6a49f0;

  /* ---------- Type ----------
     Changa carries the display weight — a condensed, high-energy Arabic
     face. Alexandria sets running text: geometric, quiet, wide-ish, so
     it does not fight the headlines. */
  --lx-font-display: "Changa", "Segoe UI", system-ui, sans-serif;
  --lx-font-ar: "Alexandria", "Segoe UI", system-ui, sans-serif;
  --lx-font-mono: "Changa", ui-monospace, monospace;

  --lx-fs-hero: clamp(2.5rem, 1.4rem + 4.6vw, 4.125rem); /* 40 → 66 */
  --lx-fs-h1: clamp(1.875rem, 1.3rem + 2.6vw, 2.625rem); /* 30 → 42 */
  --lx-fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);   /* 24 → 30 */
  --lx-fs-h3: 1.375rem;
  --lx-fs-lg: 1.0625rem;
  --lx-fs-base: 1rem;
  --lx-fs-sm: 0.875rem;
  --lx-fs-xs: 0.8125rem;
  --lx-fs-2xs: 0.6875rem;

  --lx-lh-tight: 1.05;
  --lx-lh-heading: 1.25;
  --lx-lh-body: 1.75;
  --lx-lh-snug: 1.55;

  --lx-fw-light: 300;
  --lx-fw-normal: 400;
  --lx-fw-medium: 500;
  --lx-fw-semibold: 600;
  --lx-fw-bold: 700;
  --lx-fw-black: 800;

  --lx-tracking-label: 0.1em;
  --lx-measure: 44ch;

  /* ---------- Space — 4px base ---------- */
  --lx-space-1: 0.25rem;
  --lx-space-2: 0.5rem;
  --lx-space-3: 0.75rem;
  --lx-space-4: 1rem;
  --lx-space-5: 1.5rem;
  --lx-space-6: 2rem;
  --lx-space-7: 3rem;
  --lx-space-8: 4rem;
  --lx-space-9: 6rem;

  /* ---------- Radius / elevation / motion ---------- */
  --lx-radius-sm: 6px;
  --lx-radius-md: 10px;
  --lx-radius-lg: 18px;
  --lx-radius-xl: 24px;
  --lx-radius-pill: 999px;

  --lx-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.45);
  --lx-shadow-overlay: 0 28px 70px rgba(0, 0, 0, 0.7);
  --lx-glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 12px 34px rgba(124, 92, 255, 0.22);

  --lx-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --lx-dur-fast: 120ms;
  --lx-dur: 200ms;
  --lx-dur-slow: 340ms;

  /* ---------- Layout ---------- */
  --lx-container: 1320px;
  --lx-gutter: var(--lx-space-4);
  --lx-header-h: 64px;

  --lx-tap-min: 44px;
  --lx-focus-ring: 2px solid var(--lx-cyan);
  --lx-focus-offset: 2px;

  --lx-z-base: 1;
  --lx-z-sticky: 100;
  --lx-z-header: 200;
  --lx-z-drawer: 300;
  --lx-z-modal: 400;
  --lx-z-toast: 500;
}

@media (min-width: 768px) {
  :root {
    --lx-gutter: var(--lx-space-6);
    --lx-header-h: 72px;
  }
}