/* Juicy Joes — Neon Kong design tokens
   Source of truth for colour, type, spacing, radii, motion and layering.
   Values match the approved Neon Kong homepage. Change here, everything follows. */

:root {
  /* ---- Colour: ground ---- */
  --night: #070506;        /* page ground */
  --wall: #100A0B;         /* wall behind content */
  --glass: #1A1214;        /* raised surface: cards, inputs, drawers */
  --glass-2: #221719;      /* hover / second surface */
  --glass-3: #2A1D1F;      /* pressed / third surface */
  --line: #2E1F21;         /* hairline borders */
  --line-2: #443033;       /* stronger borders, hover borders */

  /* ---- Colour: neon accent ---- */
  --neon: #FF2D3F;         /* the red tube; primary action */
  --neon-hot: #FF6B78;     /* hover on primary */
  --core: #FFE9DC;         /* lit tube core; neon text */
  --unlit: #4A1B22;        /* unlit glass; disabled neon */

  /* ---- Colour: brass and cream ---- */
  --brass: #C99A63;        /* labels, links, secondary accent */
  --brass-2: #8F6A40;      /* brass borders */
  --cream: #F2E6D4;        /* body text */
  --cream-2: #D9C8B2;      /* secondary text */
  --muted: #9C8474;        /* tertiary text, placeholders */

  /* ---- Colour: light surfaces (lit cabinet tiles for white-background product photos) ---- */
  --paper: #F6EBD8;
  --paper-2: #E9D9BD;
  --ink: #1B1210;
  --ink-2: #4A3524;

  /* ---- Colour: semantic status (separate from the accent) ---- */
  --ok: #5DC98A;
  --ok-bg: rgba(93, 201, 138, .12);
  --warn: #E9B04A;
  --warn-bg: rgba(233, 176, 74, .12);
  --bad: #FF5A5A;
  --bad-bg: rgba(255, 90, 90, .12);
  --info: #C99A63;
  --info-bg: rgba(201, 154, 99, .12);

  /* ---- Glow recipes ---- */
  --glow-s: 0 0 4px rgba(255,255,255,.9), 0 0 11px var(--neon), 0 0 26px var(--neon), 0 0 64px rgba(255,45,63,.55);
  --glow-xs: 0 0 4px rgba(255,255,255,.7), 0 0 8px var(--neon), 0 0 18px rgba(255,45,63,.5);
  --glow-btn: 0 0 0 1px rgba(255,255,255,.15) inset, 0 10px 40px -10px var(--neon), 0 0 24px rgba(255,45,63,.35);
  --glow-btn-hover: 0 0 0 1px rgba(255,255,255,.2) inset, 0 12px 50px -8px var(--neon), 0 0 40px rgba(255,45,63,.5);
  --glow-brass: 0 0 0 3px rgba(201,154,99,.18), 0 0 18px rgba(201,154,99,.15);

  /* ---- Type ---- */
  --display: 'Big Shoulders Display', 'Impact', 'Arial Narrow', sans-serif;   /* headlines, prices, big numbers */
  --sign: 'Tilt Neon', 'Big Shoulders Display', cursive;                        /* neon sign words only */
  --body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;                 /* everything else */

  --fs-xs: .74rem;
  --fs-sm: .86rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --h1: clamp(2.6rem, 6vw, 4.6rem);
  --h2: clamp(1.9rem, 4vw, 3rem);
  --h3: clamp(1.35rem, 2.2vw, 1.8rem);
  --h4: 1.15rem;
  --sign-size: clamp(2rem, 5.2vw, 4.2rem);
  --lh-tight: .92;
  --lh-body: 1.55;
  --track-caps: .12em;
  --track-eyebrow: .2em;

  /* ---- Space ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --gutter: clamp(16px, 4vw, 64px);
  --container: 1500px;
  --container-narrow: 760px;
  --container-mid: 1100px;

  /* ---- Radii ---- */
  --r-sm: 3px;
  --r: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .6s;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- Layers ---- */
  --z-header: 60;
  --z-mega: 61;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;

  /* ---- Controls ---- */
  --control-h: 46px;
  --control-h-sm: 36px;
  --tap: 44px;             /* minimum touch target */

  color-scheme: dark;
}