/*
  ============================================================
  SEED: 647834

  A — Layout:      digit 4 → Mosaic — all content in CSS grid mosaic, no uniform card sizes
  B — Color:       digit 3 → Pure white base (#ffffff), single ink-black primary (#0d0d0d),
                             zero other colors except one ultra-saturated accent (#DDFF00 acid yellow)
  C — Typography:  digit 8 → Display: DM Serif Display (serif) + Body: Space Grotesk (geometric sans)
  D — Visual lang: digit 7 → Hard geometric cutouts — sections use clip-path polygon borders
  E — Navigation:  digit 4 → Hidden until hover — nav appears on mouse move to top edge
  F — Tone:        digit 6 → Dry wit — understated humor, self-aware, confident understatement

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.
  ============================================================

  BRAND ARCHETYPE:    Provocateur
  LAYOUT PARADIGM:    Mosaic grid — 6-column asymmetric, no two cards share same span
  SECTION ORDER:      Advertorial tag → Hidden nav → Hero → Mosaic reasons (1–5) → Product CTA → Footer
  DISPLAY FONT:       DM Serif Display — https://fonts.google.com/specimen/DM+Serif+Display
  BODY FONT:          Space Grotesk — https://fonts.google.com/specimen/Space+Grotesk
  PRIMARY COLOR:      #0d0d0d — ink black. All-in, no softening.
  SHAPE LANGUAGE:     Sharp / rectangular — clip-path chamfers, no border-radius, hard cuts
  SIGNATURE MOMENT:   Giant ghost numerals (40vw, opacity 0.04) behind each mosaic reason card
  TONE OF VOICE:      Dry, self-aware, quietly confrontational
  ============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Space+Grotesk:wght@300;400;500;700&display=swap');

:root {
  /* ---- Brand Colors ---- */
  --brand-primary:    #0d0d0d;
  --brand-secondary:  #0d0d0d;   /* same hue family — only 3 colors total */
  --brand-accent:     #DDFF00;   /* acid yellow — CTAs, active states, highlights */

  /* ---- Surfaces ---- */
  --surface-base:     #ffffff;
  --surface-raised:   #f4f4f4;
  --surface-inverse:  #0d0d0d;

  /* ---- Text ---- */
  --text-primary:     #0d0d0d;
  --text-secondary:   #5a5a5a;
  --text-inverse:     #ffffff;
  --text-accent:      #0d0d0d;   /* text on accent backgrounds */

  /* ---- Borders ---- */
  --border-subtle:    #e0e0e0;
  --border-strong:    #0d0d0d;

  /* ---- Typography ---- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- Fluid Type Scale ---- */
  --text-hero: clamp(3.5rem, 9vw,  8.5rem);
  --text-h1:   clamp(2.25rem, 5vw, 4.5rem);
  --text-h2:   clamp(1.5rem,  3vw, 2.75rem);
  --text-h3:   clamp(1.15rem, 2vw, 1.6rem);
  --text-body: clamp(0.9rem,  1.3vw, 1.05rem);
  --text-sm:   clamp(0.7rem,  0.9vw, 0.8rem);
  --text-label:clamp(0.65rem, 0.8vw, 0.75rem);

  /* ---- Spacing Scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --page-max:     1440px;
  --content-max:  1280px;
  --gutter:       clamp(1rem, 3vw, 2.5rem);
  --grid-gap:     2px;            /* mosaic grid tight gap */
  --grid-cols:    6;

  /* ---- Clip-path shapes (geometric cutouts) ---- */
  --clip-chamfer-sm:  polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --clip-chamfer-md:  polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  --clip-chamfer-lg:  polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  --clip-slash-top:   polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  --clip-slash-both:  polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  --clip-img-corner:  polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;

  /* ---- Shadows (minimal — sharp brand) ---- */
  --shadow-sharp:  4px 4px 0 var(--brand-primary);
  --shadow-accent: 4px 4px 0 var(--brand-accent);
}