/* ═══════════════════════════════════════════════════════════════
   tokens.css  –  URVI Pop-Art Design Tokens
   Global CSS custom properties: colours, type, spacing, shadow, radius
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── COLOUR PALETTE ─────────────────────────────────────────── */

  /* Primary Backgrounds */
  --color-primary:        hsl(45, 97%, 54%);   /* Mustard Yellow  */
  --color-bg-cream:       hsl(44, 60%, 96%);   /* Warm Cream/Off-white */
  --color-bg-body:        hsl(44, 60%, 96%);

  /* Accent Colours */
  --color-accent-pink:    hsl(330, 100%, 58%); /* Hot Pink        */
  --color-accent-orange:  hsl(22,  100%, 55%); /* Bright Orange   */
  --color-accent-lime:    hsl(82,  95%,  45%); /* Lime Green      */
  --color-accent-red:     hsl(4,   90%,  50%); /* Bold Red        */

  /* Text & Borders */
  --color-ink:            hsl(0, 0%, 6%);      /* Stark Black     */
  --color-ink-muted:      hsl(0, 0%, 22%);     /* Dark Grey       */
  --color-ink-soft:       hsl(0, 0%, 45%);     /* Mid Grey        */

  /* Surface */
  --color-surface:        hsl(0, 0%, 100%);
  --color-surface-raised: hsl(0, 0%, 99%);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */

  --font-display:  'Anton', 'Impact', Arial Black, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */
  --text-8xl:  6rem;      /* 96px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.15em;

  /* ── SPACING SCALE ──────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── BORDER ─────────────────────────────────────────────────── */

  --border-width:    3px;
  --border-width-lg: 4px;
  --border-color:    var(--color-ink);
  --border-base:     var(--border-width) solid var(--border-color);
  --border-lg:       var(--border-width-lg) solid var(--border-color);

  /* ── BORDER RADIUS ──────────────────────────────────────────── */

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 9999px;

  /* ── SHADOWS (neo-brutalism) ────────────────────────────────── */

  --shadow-sm:   3px  3px  0 var(--color-ink);
  --shadow-md:   5px  5px  0 var(--color-ink);
  --shadow-lg:   7px  7px  0 var(--color-ink);
  --shadow-xl:   10px 10px 0 var(--color-ink);

  /* Hover states (shadow shifts inward = pressed feel) */
  --shadow-hover: 2px 2px 0 var(--color-ink);
  --shadow-press: 1px 1px 0 var(--color-ink);

  /* ── TRANSITION ─────────────────────────────────────────────── */

  --ease-snap:   cubic-bezier(0.25, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   100ms;
  --duration-base:   180ms;
  --duration-slow:   300ms;

  /* ── Z-INDEX ────────────────────────────────────────────────── */

  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-marquee: 50;
  --z-modal:   200;

  /* ── LAYOUT ─────────────────────────────────────────────────── */

  --max-width:    1280px;
  --content-gap:  var(--space-8);
  --section-py:   var(--space-20);

  /* ── MARQUEE ────────────────────────────────────────────────── */

  --marquee-height:       44px;
  --marquee-duration:     28s;
  --marquee-gap:          var(--space-12);
  --marquee-bg:           var(--color-primary);
  --marquee-color:        var(--color-ink);
  --marquee-font-size:    var(--text-sm);
  --marquee-font-weight:  800;
  --marquee-letter-spacing: var(--tracking-wide);
}