/* ================================================================
   ASCENDED — Design System Tokens
   Theme: Retro Arcade Dark

   Same variable NAMES as every other brand in this repo, so all the
   structural CSS (base / layout / components / launchpad) keeps working
   untouched. Only the values change.

   Two decisions worth stating, because they are not obvious:

   1. RADII GO TO ZERO. Pixel art has no antialiased corners. Rounded
      rectangles are the single thing that most breaks an arcade look,
      so --radius-sm/md/lg are 0 and only pills keep their curve.

   2. THE DISPLAY SCALE SHRINKS. Press Start 2P is roughly twice as wide
      per character as a normal sans. Reusing CompePAD's 6.5rem heading
      would run off the side of a phone. The big steps are pulled down
      to compensate — the headings still read as huge, because the
      typeface is.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
    /* ── Surfaces: deep violet-black, not neutral black ──────────── */
    --bg: #07050E;
    --bg-alt: #0B0816;
    --panel: #140F26;
    --panel-alt: #1D1636;
    --panel-elevated: #241B42;
    --surface-hover: rgba(52, 245, 228, 0.07);
    --glass: rgba(11, 8, 22, 0.80);
    --glass-border: rgba(52, 245, 228, 0.20);

    /* ── Text ───────────────────────────────────────────────────── */
    --text: #EDE7FF;
    --text-muted: #8479B0;
    --text-subtle: #5C5286;

    /* ── Primary: cyan, the "insert coin" colour ────────────────── */
    --primary: #34F5E4;
    --primary-hover: #5CFFF0;
    --primary-dim: #1FC9BA;
    --primary-soft: rgba(52, 245, 228, 0.09);
    --primary-ring: rgba(52, 245, 228, 0.32);
    --primary-muted: rgba(52, 245, 228, 0.55);
    --primary-glow: rgba(52, 245, 228, 0.20);
    --primary-glow-strong: rgba(52, 245, 228, 0.42);

    /* ── Accent: magenta, used sparingly for "something happened" ─ */
    --accent: #FF3D8B;
    --accent-soft: rgba(255, 61, 139, 0.11);
    --accent-glow: rgba(255, 61, 139, 0.30);

    /* ── Status ─────────────────────────────────────────────────── */
    --success: #4BE07A;
    --success-soft: rgba(75, 224, 122, 0.13);
    --warning: #FFC23B;
    --warning-soft: rgba(255, 194, 59, 0.13);
    --danger: #FF4D6D;
    --danger-soft: rgba(255, 77, 109, 0.15);
    --info: #34F5E4;
    --info-soft: rgba(52, 245, 228, 0.09);

    /* ── Borders: visible, 2px, never hairline ──────────────────── */
    --border: #2A2145;
    --border-hover: rgba(52, 245, 228, 0.55);
    --border-color: #2A2145;
    --border-subtle: #1D1636;
    --border-strong: #34F5E4;

    /* ── Shadows: hard offsets, no blur. Blur reads as "modern". ── */
    --shadow-sm: 0 2px 0 rgba(0, 0, 0, 0.7);
    --shadow-md: 0 3px 0 rgba(0, 0, 0, 0.75);
    --shadow-lg: 0 5px 0 rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 8px 0 rgba(0, 0, 0, 0.85);
    --shadow-card: 0 4px 0 rgba(0, 0, 0, 0.6);
    --shadow-inset: inset 0 2px 0 rgba(255, 255, 255, 0.06);
    --glow-primary: 0 0 0 2px rgba(52, 245, 228, 0.28);
    --glow-primary-strong: 0 0 0 2px #34F5E4;
    --glow-btn: 0 0 18px rgba(52, 245, 228, 0.30);

    /* ── Sidebar geometry (unchanged: layout.css depends on it) ─── */
    --sidebar-width: 88px;
    --sidebar-width-mobile: 64px;

    /* ── Typography ─────────────────────────────────────────────── */
    --font-display: 'Press Start 2P', 'IBM Plex Mono', monospace;
    --font-sans: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Monaco, monospace;

    /* Small steps stay put — body copy must remain readable. */
    --font-2xs: 0.6875rem;
    --font-xs: 0.75rem;
    --font-sm: 0.8125rem;
    --font-md: 0.875rem;
    --font-base: 0.9375rem;
    --font-lg: 1.0625rem;
    --font-xl: 1.1875rem;

    /* Big steps shrink — see note 2 at the top of this file. */
    --font-2xl: 1.375rem;
    --font-3xl: 1.625rem;
    --font-4xl: 1.9375rem;
    --font-5xl: 2.5rem;
    --font-6xl: 3.25rem;
    --font-display-xl: 3.75rem;

    /* Pixel type needs air between lines or it turns into a brick. */
    --lh-tight: 1.25;
    --lh-snug: 1.4;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    /* Positive tracking: pixel glyphs sit too close by default. */
    --tracking-display: 0.02em;
    --tracking-tighter: 0;
    --tracking-tight: 0;
    --tracking-normal: 0.01em;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.14em;

    /* ── Spacing (4px grid, unchanged) ──────────────────────────── */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 56px;
    --space-3xl: 88px;
    --space-4xl: 128px;

    /* ── Radii: square. See note 1. ─────────────────────────────── */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 2px;
    --radius-full: 9999px;

    /* ── Transitions: stepped, so motion reads as frames ────────── */
    --ease-out: steps(4, end);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 0.12s var(--ease-out);
    --transition-base: 0.22s var(--ease-out);
    --transition-slow: 0.5s var(--ease-in-out);

    /* ── Component tokens ───────────────────────────────────────── */
    --input-height: 46px;
    --btn-height: 46px;
    --btn-height-compact: 38px;
    --navbar-height: 88px;
    --container-max: 1480px;

    /* ── Z-Index (unchanged) ────────────────────────────────────── */
    --z-bg: 0;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-toast: 900;
}