/* ============================================================================
   Strapz · Design tokens
   Source of truth: docs/design-tokens.md
   ========================================================================== */

:root {
  /* ─── Color · Primary dark scale ─── */
  --strapz-black:    #0A0A0A;
  --strapz-coal:     #1A1A1A;
  --strapz-iron:     #2A2A2A;
  --strapz-concrete: #3D3D3D;
  --strapz-ash:      #8A8A8A;
  --strapz-bone:     #E8E5E0;
  --strapz-white:    #FFFFFF;

  /* ─── Color · Accents ─── */
  --strapz-blood:        #C8102E;
  --strapz-blood-hover:  #A50D26;
  --strapz-rust:         #D14B1F;
  --strapz-rust-hover:   #B03D17;

  /* Default primary accent - flip to rust for warmer campaigns */
  --strapz-accent:       var(--strapz-blood);
  --strapz-accent-hover: var(--strapz-blood-hover);

  /* ─── Color · Functional ─── */
  --strapz-success: #3A9D5D;
  --strapz-warning: #E2A03F;
  --strapz-error:   var(--strapz-rust);

  /* ─── Color · Strap colors (configurator swatches) ─── */
  --swatch-zwart:       #0A0A0A;
  --swatch-rood:        #B8161D;
  --swatch-donkerblauw: #0F2A4A;
  --swatch-paars:       #5E2D7F;
  --swatch-roze:        #E84A8A;
  --swatch-wit:         #F5F5F0;
  --swatch-grijs:       #7A7A7A;
  --swatch-blauw:       #1E5BAE;

  /* ─── Color · Bedrukking ─── */
  --print-black: #0A0A0A;
  --print-white: #FFFFFF;

  /* ─── Semantic ─── */
  --color-bg:          var(--strapz-black);
  --color-bg-elev:     var(--strapz-coal);
  --color-bg-elev-2:   var(--strapz-iron);
  --color-border:      var(--strapz-concrete);
  --color-text:        var(--strapz-bone);
  --color-text-strong: var(--strapz-white);
  --color-text-muted:  var(--strapz-ash);
  --color-link:        var(--strapz-white);
  --color-link-hover:  var(--strapz-accent);

  /* ─── Typography · Stacks ─── */
  --font-display: "Bebas Neue", "Anton", "Oswald", "Impact", sans-serif;
  --font-body:    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-print:   var(--font-body);

  /* ─── Typography · Sizes (mobile defaults; desktop overrides via media query) ─── */
  --fs-display-1: clamp(3rem,  10vw, 6rem);    /* 48 → 96 */
  --fs-display-2: clamp(2.5rem, 8vw, 4.5rem);  /* 40 → 72 */
  --fs-h1:        clamp(2rem,   6vw, 3.5rem);
  --fs-h2:        clamp(1.5rem, 4vw, 2.5rem);
  --fs-h3:        clamp(1.25rem, 3vw, 1.75rem);
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.875rem;
  --fs-caption:   0.75rem;
  --fs-button:    1rem;
  --fs-label:     0.8125rem;

  --lh-display: 0.95;
  --lh-heading: 1.05;
  --lh-body:    1.6;
  --lh-tight:   1.4;

  --tracking-display: 0.02em;
  --tracking-button:  0.06em;
  --tracking-label:   0.08em;

  /* ─── Spacing scale ─── */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-xxl:  48px;
  --space-xxxl: 64px;
  --space-section:        96px;
  --space-section-mobile: 56px;

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-pad-mobile:  16px;
  --container-pad-tablet:  24px;
  --container-pad-desktop: 32px;

  /* ─── Border radius (hard edges first) ─── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-full: 9999px;

  /* ─── Borders ─── */
  --border-hairline: 1px solid var(--color-border);
  --border-strong:   2px solid var(--color-text);
  --border-accent:   2px solid var(--strapz-accent);

  /* ─── Shadows (hard offsets, no soft glow) ─── */
  --shadow-card: 0 0 0 1px var(--color-border);
  --shadow-cta:  0 4px 0 0 var(--strapz-accent-hover);
  --shadow-cta-rust: 0 4px 0 0 var(--strapz-rust-hover);

  /* ─── Motion ─── */
  --ease-snap:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-hammer: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-instant: 80ms;
  --dur-snap:    120ms;
  --dur-base:    200ms;

  /* ─── Z-index ─── */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;
  --z-cookie:  2000;

  /* ─── Breakpoints (informational; use in media queries) ─── */
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;
}