/* =========================================================
   ONE STEP PROGRESS — Design Tokens
   Street / Grunge / Bold / Editorial
   ========================================================= */

:root {
  /* ---- BRAND COLORS ---- */
  --red-brand:   #e30613;          /* CTA primary, logo mark, accent */
  --red-deep:    #a8040f;          /* Testi piccoli su panna (WCAG AA) */
  --red-blood:   #6b0309;          /* Shadow drops, dark accents */

  /* ---- INKS ---- */
  --black-ink:   #0a0a0a;          /* Sfondo dominante scuro */
  --black-soft:  #1a1714;          /* Card scure, secondario */
  --concrete:    #3a3a3a;          /* Grigio cemento medio */
  --concrete-2:  #6b6863;          /* Grigio cemento chiaro */

  /* ---- PAPERS ---- */
  --paper:       #f5f0e6;          /* Avorio sporco principale */
  --paper-warm:  #ece6d8;          /* Variant scuro avorio */
  --paper-torn:  #d9d2bf;          /* Bordo strappato */

  /* ---- ACCENT (uso massimo 5% schermo) ---- */
  --acid-yellow: #f5e60a;          /* Tag spray, highlight Stussy-style */
  --magenta:     #ff2e6e;          /* Alert/glitch, hover state opzionale */

  /* ---- SEMANTIC ---- */
  --bg:          var(--black-ink);
  --bg-alt:      var(--black-soft);
  --fg:          var(--paper);
  --fg-muted:    var(--concrete-2);
  --link:        var(--red-brand);
  --link-hover:  var(--paper);

  /* ---- FONT FAMILIES ---- */
  --font-display:  'Bebas Neue', 'Impact', sans-serif;
  --font-street:   'Bungee', 'Bebas Neue', sans-serif;
  --font-shade:    'Bungee Shade', 'Bungee', sans-serif;
  --font-tag:      'Permanent Marker', 'Brush Script MT', cursive;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-body:     'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-anton:    'Anton', 'Bebas Neue', sans-serif;

  /* ---- TYPE SCALE (fluid) ---- */
  --fs-mono:        clamp(0.69rem, 0.65rem + 0.2vw, 0.78rem);   /* 11-12.5px */
  --fs-body-sm:     clamp(0.88rem, 0.85rem + 0.2vw, 0.94rem);   /* 14-15px */
  --fs-body:        clamp(1rem, 0.95rem + 0.3vw, 1.13rem);      /* 16-18px */
  --fs-body-lg:     clamp(1.13rem, 1.05rem + 0.4vw, 1.25rem);   /* 18-20px */
  --fs-h3:          clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);     /* 24-36px */
  --fs-h2:          clamp(1.75rem, 1.2rem + 2.7vw, 3.5rem);     /* 28-56px */
  --fs-h1:          clamp(2.5rem, 1.5rem + 5vw, 6rem);          /* 40-96px */
  --fs-display:     clamp(3.5rem, 1rem + 12vw, 13.75rem);       /* 56-220px */

  /* ---- SPACING (8pt base) ---- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   16px;
  --s-4:   24px;
  --s-5:   40px;
  --s-6:   64px;
  --s-7:   96px;
  --s-8:   144px;
  --s-9:   200px;

  /* ---- BREAKPOINTS (just for reference, used in @media) ---- */
  /* sm: 360px / md: 768px / lg: 1024px / xl: 1440px / xxl: 1920px */

  /* ---- LAYOUT ---- */
  --container-max:    1440px;
  --container-pad:    var(--s-4);
  --container-pad-lg: var(--s-6);
  --gap:              var(--s-3);
  --gap-lg:           var(--s-4);

  /* ---- RADII ---- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---- SHADOWS (street/hard) ---- */
  --shadow-stamp-sm: 4px 4px 0 var(--black-ink);
  --shadow-stamp:    8px 8px 0 var(--black-ink);
  --shadow-stamp-red:8px 8px 0 var(--red-blood);
  --shadow-soft:     0 12px 32px rgba(0,0,0,.35);

  /* ---- MOTION ---- */
  --ease-street:    cubic-bezier(.2, .8, .2, 1);
  --ease-snap:      cubic-bezier(.5, 0, 0, 1);
  --ease-bounce:    cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:       120ms;
  --dur-base:       240ms;
  --dur-slow:       420ms;
  --dur-page:       600ms;

  /* ---- Z-INDEX ---- */
  --z-bg:        -1;
  --z-default:   0;
  --z-content:   1;
  --z-sticky:    50;
  --z-overlay:   80;
  --z-nav:       100;
  --z-modal:     200;
  --z-cursor:    9999;

  /* ---- HEADER ---- */
  --nav-h:       72px;
  --nav-h-mobile:64px;

  /* ---- TEXTURE OVERLAY ---- */
  --grain-opacity: 0.08;
}

/* prefers-reduced-motion: shorten all transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-page: 0ms;
  }
}