/* Ace of Fades — design tokens (single source of truth) */
:root {
  /* palette: sampled from the shop photos (cut-02/04/06) — cool blue-black
     ceiling (#21242B), concrete grays (#5B5E62, #A2A7A6), green-white LED
     tubes (#DDDFD6). Red kept for the suit mark only. */
  --color-ink: #101216;
  --color-surface: #191c21;
  --color-surface-raised: #232730;
  --color-line: #33373f;
  --color-cream: #eef0ec;      /* primary text — LED-white family */
  --color-cream-dim: #a2a7a6;  /* secondary text — sampled concrete gray */
  --color-accent: #d64f35;     /* card-suit red — CTAs, prices, highlights */
  --color-accent-deep: #b03a26;
  --color-led: #e7ece7;        /* LED tube white — hex lights, sheen, glow */
  --color-glow: rgba(221, 223, 214, 0.4); /* LED halo for box/drop shadows */
  --color-red: #c8432b;        /* suit mark */

  /* type */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif; /* italic counterpoint */

  /* 4px spacing grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --measure: 34rem;
  --container-max: 78rem;
  --header-h: 72px;
  --header-brand-height: 56px;
  --header-brand-height-mobile: 48px;
  --header-brand-height-narrow: 44px;

  /* hero ceiling fixtures stay outside the centered brand safe area */
  --hero-hex-mobile-size: min(46vw, 11.25rem);
  --hero-hex-mobile-top: 0%;
  --hero-hex-mobile-right: -9%;
  --hero-hex-main-size: min(28vw, 21rem);
  --hero-hex-main-top: 0%;
  --hero-hex-main-right: 1%;
  --hero-hex-side-size: min(28vw, 21rem);
  --hero-hex-side-top: 0%;
  --hero-hex-side-left: 1%;
  --hero-hex-breathe-cycle: 8s;
  --hero-logo-outline: 1px;

  /* craft sequence */
  --craft-scroll-length: 420svh;
  --craft-step-height: clamp(26rem, 58svh, 32rem);
  --craft-tablet-step-height: clamp(28rem, 60svh, 36rem);
  --craft-word-size: clamp(5rem, 18vw, 13rem);
  --craft-title-size: clamp(2rem, 5vw, 4.5rem);
  --craft-copy-size: clamp(1.75rem, 4vw, 3.25rem);
  --craft-kicker-size: 1.25rem;
  --craft-count-size: 0.875rem;
  --craft-mobile-step-top: 11rem;
  --craft-desktop-step-top: 19rem;
  --craft-desktop-content: 44rem;
  --craft-desktop-visual-start: 48%;
  --craft-word-stroke: 1px;
  --craft-rail-size: 4px;
  --craft-clipper-width: clamp(72px, 10vw, 112px);
  --craft-clipper-optical-shift: -7.5%;
  --craft-rail-cutout-width: 68%;
  --craft-prism-large: clamp(16rem, 32vw, 30rem);
  --craft-prism-small: clamp(10rem, 20vw, 18rem);
  --craft-prism-stroke: 1.5px;
  --craft-prism-mobile-a-top: 9%;
  --craft-prism-mobile-a-right: -18%;
  --craft-prism-mobile-b-top: 43%;
  --craft-prism-mobile-b-right: -10%;
  --craft-prism-mobile-c-right: 18%;
  --craft-prism-mobile-c-bottom: 2%;
  --craft-prism-mobile-small: 8rem;
  --craft-prism-narrow-c-right: 6%;
  --craft-prism-narrow-c-bottom: -6%;
  --craft-depth-near: 28px;
  --craft-depth-mid: 12px;
  --craft-wash-blur: 48px;
  --craft-fade-blur: 6px;

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hero-fades-sweep-cycle: 6s;
  --hero-fades-pixel-size: 0.5rem;
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* z-scale */
  --z-header: 10;
  --z-fab: 20;
  --z-overlay: 40;
}