/* ==========================================================================
   DAINCARD — design tokens ("The Wax Room", DIRECTION.md v1)
   Two families only (Bungee + Archivo), one palette, one spacing scale.
   ========================================================================== */

:root {
  /* ---- Palette ---------------------------------------------------------- */
  --c-blue: #2547F5;          /* Slab Blue — primary, buttons, wordmark      */
  --c-blue-deep: #1631C4;     /* shaded side of Slab Blue (box sides, hover) */
  --c-blue-soft: #DCE3FF;     /* tint for light panels                       */
  --c-midnight: #0D1630;      /* Midnight Rink — heavy surfaces, text        */
  --c-midnight-2: #1A2550;    /* raised surface on Midnight                  */
  --c-yellow: #FFD03A;        /* Wax Yellow — price stickers, highlights     */
  --c-yellow-deep: #E0AE14;
  --c-red: #F03A2E;           /* Tag Red — decorative, small doses           */
  --c-red-ink: #C8261B;       /* Tag Red for text / white-on-red (AA 4.5:1)  */
  --c-penny: #EEF2FF;         /* Penny Sleeve — light section background     */
  --c-white: #FFFFFF;

  --c-ink: var(--c-midnight);
  --c-ink-soft: #3B4466;      /* 9.5:1 on white, 8.6:1 on Penny Sleeve       */
  --c-ink-on-dark: #C9D0EE;   /* secondary text on Midnight (10:1)           */
  --c-line: #C9D1F0;

  /* ---- Type ------------------------------------------------------------- */
  --f-display: "Bungee", "Arial Black", Impact, sans-serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wdth-expanded: 125%;      /* Archivo Expanded for small labels           */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.2rem, 1rem + 3.9vw, 5rem);

  /* ---- Space (one scale, used everywhere) -------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --section-y: clamp(3.75rem, 2.75rem + 4vw, 6.5rem);
  --container: 1280px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

  /* ---- Shape ------------------------------------------------------------ */
  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-tcard: 7% / 5%;         /* rounded corners of a real 63:88 card        */
  --bw: 3px;

  /* Sticker offset shadows (hard, no blur) */
  --sh-1: 2px 2px 0 var(--c-midnight);
  --sh-2: 4px 4px 0 var(--c-midnight);
  --sh-3: 7px 7px 0 var(--c-midnight);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Focus (overridden per surface) ----------------------------------- */
  --focus: var(--c-blue);

  /* ---- Textures (CSS/SVG only — no photos) ------------------------------- */
  --tx-halftone: radial-gradient(circle, rgba(13, 22, 48, 0.12) 1.2px, transparent 1.7px);
  --tx-halftone-light: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1.2px, transparent 1.7px);
  --tx-bricks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cpath d='M0 .75H120M0 30.75H120M.75 0V30M60.75 30V60' stroke='%230D1630' stroke-opacity='.22' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  /* Spray-paint edge used for every section hand-off */
  --edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48'%3E%3Cpath d='M0 48V26Q30 16 60 24T120 20T180 27T240 18T300 25T360 16T420 24T480 20T540 27T600 18T660 25T720 16T780 24T840 20T900 27T960 18T1020 25T1080 16T1140 24T1200 26V48Z'/%3E%3Ccircle cx='88' cy='12' r='2.5'/%3E%3Ccircle cx='214' cy='8' r='1.8'/%3E%3Ccircle cx='300' cy='6' r='1.4'/%3E%3Ccircle cx='402' cy='10' r='3'/%3E%3Ccircle cx='618' cy='6' r='1.6'/%3E%3Ccircle cx='866' cy='11' r='2.4'/%3E%3Ccircle cx='992' cy='5' r='1.4'/%3E%3Ccircle cx='1104' cy='8' r='2'/%3E%3C/svg%3E");
}