/* GTA Explorer's design tokens: mics.dev's palette and fonts (mic-web/src/styles.css), extended into a system.
   Everything else uses these; a literal colour, size or radius elsewhere is a bug to fix. */
:root {
  color-scheme: dark;

  /* ── palette (from mics.dev; do not replace) ── */
  --bg: #0a0a0f; --panel: #12121a; --panel-2: #15121f; --panel-3: #1b1826;
  --text: #ecebf3; --muted: #a09cb3; --dim: #9894ad; --faint: #8f8ba2; --white: #fff;
  --lilac: #c4b5fd; --lilac-2: #e9e4ff; --purple: #a855f7; --violet: #6d28d9;
  --line: rgba(196, 181, 253, .09); --line-2: rgba(196, 181, 253, .14); --line-3: rgba(196, 181, 253, .2);
  --grad: linear-gradient(135deg, #a855f7, #6d28d9);
  /* the pictures' backdrop, like the store's cover art */
  --art: radial-gradient(120% 95% at 50% 12%, #2d2048 0%, #1a1529 55%, #13111c 100%);

  /* ── surfaces, from the page up ── */
  --surface-0: var(--bg);        /* the page */
  --surface-1: var(--panel);     /* panels, cards, inputs */
  --surface-2: var(--panel-2);   /* raised: popovers, the sheet */
  --surface-3: var(--panel-3);   /* hover on a raised surface */
  --sunken: #0d0c13;             /* code, wells inside a panel */

  /* ── the one accent, in its states ── */
  --accent: var(--purple);
  --accent-text: var(--lilac);
  --accent-bg: rgba(168, 85, 247, .12);       /* selected */
  --accent-bg-strong: rgba(168, 85, 247, .2);
  --accent-line: rgba(168, 85, 247, .42);
  --hover: rgba(196, 181, 253, .05);          /* a quiet hover on anything */
  --hover-2: rgba(196, 181, 253, .08);

  /* ── states, muted so they sit beside the lilac ── */
  --success: #7fd1ae; --success-bg: rgba(127, 209, 174, .12);
  --warning: #e6c07b; --warning-bg: rgba(230, 192, 123, .12);
  --danger: #ef8f9f;  --danger-bg: rgba(239, 143, 159, .12);

  /* ── spacing: 4/8/12/16/24/32/48 ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* ── radii: small controls, controls and panels, big panels ── */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-pill: 999px;

  /* ── heights of controls ── */
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px;

  /* ── elevation ── */
  --e-1: 0 1px 2px rgba(0, 0, 0, .3);
  --e-2: 0 10px 30px -10px rgba(0, 0, 0, .55);
  --e-3: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px var(--line-2);
  --e-glow: 0 24px 50px -24px rgba(109, 40, 217, .6);

  /* ── focus: one ring for everything a keyboard reaches ── */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px rgba(196, 181, 253, .75);

  /* ── layers ── */
  --z-nav: 10; --z-sticky: 20; --z-topbar: 25; --z-modal: 30; --z-scrim: 35; --z-drawer: 40; --z-popover: 50; --z-toast: 60;

  /* ── motion: 150–250 ms, one curve ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --d-1: 150ms; --d-2: 200ms; --d-3: 250ms;

  /* ── type ── */
  --display: 'Outfit', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --code: 'JetBrains Mono', ui-monospace, monospace;
  /* the scale (font shorthands; pair with the letter-spacing below where given) */
  --t-hero: 800 clamp(38px, 4.6vw, 62px)/1.02 var(--display);       --ls-hero: -.045em;
  --t-page: 800 clamp(30px, 3vw, 40px)/1.05 var(--display);         --ls-page: -.04em;
  --t-title: 700 22px/1.2 var(--display);                           --ls-title: -.02em;   /* a detail's name */
  --t-section: 600 17px/1.3 var(--display);                         --ls-section: -.01em; /* a block inside a page */
  --t-eyebrow: 600 13px/1.3 var(--body);                                                  /* what group a page is in */
  --t-body: 400 14px/1.55 var(--body);
  --t-body-strong: 600 14px/1.45 var(--body);
  --t-label: 600 13px/1.35 var(--body);                                                   /* controls, chips, tabs */
  --t-small: 500 12.5px/1.45 var(--body);
  --t-code: 500 13px/1.55 var(--code);
  --t-code-small: 500 12px/1.45 var(--code);

  /* ── layout ── */
  --side: 252px;
  --gutter: clamp(18px, 3vw, 44px);
}

/* the scale as classes, for markup that has no component of its own */
.t-hero { font: var(--t-hero); letter-spacing: var(--ls-hero); color: var(--white); }
.t-page { font: var(--t-page); letter-spacing: var(--ls-page); color: var(--white); }
.t-title { font: var(--t-title); letter-spacing: var(--ls-title); color: var(--white); }
.t-section { font: var(--t-section); letter-spacing: var(--ls-section); color: var(--text); }
.t-eyebrow { font: var(--t-eyebrow); color: var(--accent-text); }
.t-body { font: var(--t-body); color: var(--text); }
.t-small { font: var(--t-small); color: var(--muted); }
.t-code { font: var(--t-code); color: var(--text); }