/* ==========================================================================
   END. International — Design tokens
   Monochrome by design: pure black, pure white and a neutral ramp between.
   Contrast and weight carry the brand, not colour. The one accent (red) is
   reserved for the full stop on "LOCKED IN." and a few sponsor/discount notes.
   ========================================================================== */

:root {
  /* ---- Base ramp -------------------------------------------------------- */
  --black: #000;
  --white: #fff;
  --ink-900: #0a0a0a;
  --ink-850: #0d0d0d;
  --ink-800: #141414;
  --ink-700: #1f1f1f;
  --gray-600: #3d3d3d;
  --gray-500: #6b6b6b;
  --gray-400: #8f8f8f;
  --gray-300: #b8b8b8;
  --gray-200: #d6d6d6;
  --gray-100: #ebebeb;
  --gray-50: #f4f4f4;

  --accent: #ff0000;          /* "LOCKED IN." full stop, sponsor line, discount */
  --discount: #d0021b;        /* subscription badge */
  --live: #12b36a;            /* live-counter pulse */

  /* ---- Semantic (light theme — default) ---------------------------------- */
  --bg: var(--white);
  --text: var(--black);
  --border: rgba(0, 0, 0, .10);
  --tile-dark-bg: var(--black);
  --tile-dark-text: var(--white);
  --tile-light-bg: var(--white);
  --tile-light-text: var(--black);
  --tile-light-border: rgba(0, 0, 0, .08);
  --shadow-lo: 0 8px 26px rgba(0, 0, 0, .13);
  --shadow-hover: 0 22px 50px rgba(0, 0, 0, .34);

  /* ---- Type -------------------------------------------------------------- */
  --font-sans: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fw-thin: 100;   /* Helvetica Neue has no 200 cut; 200 falls back to Thin */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-label: 11px;   /* uppercase micro labels */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-body: 15px;

  --ls-label: .16em;
  --ls-wide: .22em;

  /* ---- Layout ------------------------------------------------------------ */
  --page-pad: 12px;           /* bento outer padding and gap */
  --gap: 12px;
  --grid-max: 1680px;         /* caps the bento on ultrawide screens */
  --flow-pad-x: clamp(20px, 4vw, 48px);
  --radius: 8px;

  /* ---- Motion — fast, mechanical, no bounce ----------------------------- */
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-expand: cubic-bezier(.65, 0, .2, 1);
  --dur-1: .15s;
  --dur-2: .3s;
  --dur-3: .5s;

  /* ---- Layers ------------------------------------------------------------ */
  --z-landing-cta: 40;
  --z-flow: 1000;
  --z-modal: 1100;
  --z-info: 1150;
  --z-transition: 1200;
  --z-progress: 1300;
}

/* ---- Dark theme (the grid's DARK toggle). Applied to [data-theme] roots. -- */
[data-theme="dark"] {
  --bg: var(--black);
  --text: var(--white);
  --border: rgba(255, 255, 255, .14);
  --tile-dark-bg: var(--white);
  --tile-dark-text: var(--black);
  --tile-light-bg: var(--ink-850);
  --tile-light-text: var(--white);
  --tile-light-border: rgba(255, 255, 255, .10);
  --shadow-lo: 0 8px 28px rgba(0, 0, 0, .55);
  --shadow-hover: 0 22px 50px rgba(0, 0, 0, .7);
}