/* =========================================================================
   301 AGENCY — Colors, Type & Foundational Tokens
   Primary direction: V2 "Basquiat" (white/black + red/blue/yellow)
   Source: 301-agency/src/app/globals.css + DESIGN_SYSTEM.md
   ========================================================================= */

/* --- Fonts: load from Google (no local TTF in source repo) --------------- */

:root {
  /* =====================================================================
     COLOR TOKENS — LIVE SITE (PRIMARY · pixel-sampled nov 2025)
     The deployed 301.agency uses a refined V1-Industrial-Neon palette,
     NOT the V2 Basquiat colors in the original design-doc.
     ===================================================================== */
  --live-bg:        #050505;  /* near-black canvas (source: --bg) */
  --live-bg-soft:   #0A0A0A;  /* slight elevation */
  --live-fg:        #F0F0F0;  /* off-white text (source: --fg) */
  --live-fg-dim:    #AAAAAA;  /* secondary text (source: --fg-dim) */
  --live-yellow:    #CCFF00;  /* chartreuse neon · PRIMARY accent */
  --live-pink:      #FF0099;  /* hot magenta · SECONDARY accent */
  --live-green:     #00FF88;  /* mint accent · dashboard / 48u badge */
  --live-orange:    #FF6600;  /* warning pulse · location pin */
  --live-grey:      #2A2A2A;  /* card borders */
  --live-grey-soft: #1A1A1A;  /* card / discipline-block bg */
  /* Alias for back-compat with palette card */
  --live-surface:   #1A1A1A;
  --live-surface-2: #2A2A2A;
  --live-line:      #2A2A2A;
  --live-muted:     #AAAAAA;
  --live-lime:      #CCFF00;

  /* =====================================================================
     COLOR TOKENS — V2 "Basquiat" (ALTERNATE · wit/zwart + RGB accents)
     Documented in DESIGN_SYSTEM.md as a parallel direction — not the
     current live site. Keep as alternate theme for pitches/microsites.
     ===================================================================== */
  --basquiat-white:  #F7F7F7;  /* primary background */
  --basquiat-black:  #000000;  /* primary text, borders, dark sections */
  --basquiat-red:    #D63232;  /* accent 1 — corrections, X's, scribbles */
  --basquiat-blue:   #0C68A7;  /* accent 2 — highlights, work shadow */
  --basquiat-yellow: #FCDA05;  /* accent 3 — manifesto bg, tape, JIJ? */

  /* Card greys (used on team mugshot placeholders) */
  --basquiat-grey-100: #f0f0f0;  /* method.chaos bg */
  --basquiat-grey-300: #ccc;     /* graffiti default */
  --basquiat-grey-500: #999;     /* crossed-out text */
  --basquiat-grey-700: #666;     /* method sub-label */

  /* V1 "Industrial Neon" — secondary / referenced only */
  --v1-bg:        #050505;
  --v1-fg:        #f0f0f0;
  --v1-neon-yellow: #ccff00;
  --v1-neon-pink:   #ff0099;
  --v1-industrial-grey: #2a2a2a;
  --v1-warning-orange:  #ff6600;

  /* =====================================================================
     SEMANTIC COLOR ALIASES
     Default = LIVE SITE palette. Switch to V2 Basquiat by wrapping a
     section in `.theme-basquiat` (defined below).
     ===================================================================== */
  --bg:        var(--live-bg);
  --bg-alt:    var(--live-surface);
  --bg-dark:   var(--live-bg);
  --fg:        var(--live-fg);
  --fg-on-dark:var(--live-fg);
  --fg-muted:  var(--live-muted);

  --accent-1:  var(--live-lime);   /* primary accent */
  --accent-2:  var(--live-pink);   /* secondary accent */
  --accent-3:  var(--live-lime);

  --border:    var(--live-line);

  /* =====================================================================
     TYPOGRAPHY — 4 fonts (LIVE primary)
     ===================================================================== */
  --font-display:  "Oswald", "Impact", "Arial Narrow", sans-serif;  /* condensed industrial — LIVE uses Oswald, NOT Anton */
  --font-marker:   "Permanent Marker", "Marker Felt", cursive;       /* hero lime NUL, tape, big CTA */
  --font-scribble: "Permanent Marker", "Marker Felt", cursive;       /* scroll cue, signatures, corrections · was Rock Salt (slecht leesbaar) */
  --font-mono:     "Courier Prime", "Courier New", monospace;        /* body, metadata, manifesto */
  --font-anton:    "Anton", "Oswald", "Impact", sans-serif;          /* available for V2 Basquiat alternate */

  /* Stack roles */
  --font-body:    var(--font-mono);        /* body uses mono — ragtag-feel */
  --font-heading: var(--font-display);

  /* =====================================================================
     TYPE SCALE — clamp-based fluid
     ===================================================================== */
  --size-hero:    clamp(4rem,   15vw, 12rem);  /* DRIE / NUL / EEN */
  --size-section: clamp(3rem,   10vw, 8rem);   /* LAAT HET GEBEUREN */
  --size-title:   clamp(3rem,   8vw,  6rem);   /* DE GEBRUIKELIJKE VERDACHTEN */
  --size-h1:      5rem;                          /* MANIFESTO_V1.0, ONZE PROJECTEN */
  --size-h2:      2.5rem;                        /* team-card name */
  --size-h3:      2rem;                          /* work-card title */
  --size-body-xl: clamp(1.5rem, 4vw, 2.5rem);   /* manifesto body */
  --size-body:    1.2rem;                        /* contact info */
  --size-label:   1rem;                          /* caption, scroll */
  --size-meta:    0.8rem;                        /* type labels, FIG. */

  /* =====================================================================
     SPACING — 4pt scale (semantic)
     ===================================================================== */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Spacing patterns from LIVE source */
  --section-py: 8rem;
  --section-py-lg: 10rem;
  --section-px: 2rem;

  /* Container widths (LIVE source) */
  --container: 1400px;
  --container-narrow: 1100px;

  /* =====================================================================
     BORDERS / SHADOWS — signature offset system
     ===================================================================== */
  --border-card: 5px solid var(--basquiat-black);
  --border-hero: 20px solid var(--basquiat-black);
  --border-paper: 2px solid var(--basquiat-black);
  --border-stamp: 2px solid var(--basquiat-white);

  --shadow-paper:      10px 10px 0 var(--basquiat-black);   /* manifesto paper */
  --shadow-card:        5px  5px 0 var(--basquiat-blue);    /* work card default */
  --shadow-card-hover: 10px 10px 0 var(--basquiat-red);     /* work card hover */
  --shadow-tag:         4px  4px 0 var(--basquiat-black);   /* tape tag */
  --shadow-stamp:       5px  5px 0 var(--basquiat-red);     /* ragtag badge */

  /* =====================================================================
     ROTATIONS — ragtag "tells"
     ===================================================================== */
  --rot-card:      -1deg;     /* @kind other */
  --rot-card-alt:   1deg;     /* @kind other */
  --rot-hero:      -2deg;     /* @kind other */
  --rot-highlight: -2deg;     /* @kind other */
  --rot-tape:      -2deg;     /* @kind other */
  --rot-paper:      1deg;     /* @kind other */
  --rot-stamp:     -5deg;     /* @kind other */
  --rot-hover:      0deg;     /* @kind other */

  /* =====================================================================
     ANIMATION TOKENS
     ===================================================================== */
  --ease-default: ease;       /* @kind other */
  --ease-out: ease-out;       /* @kind other */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);  /* @kind other */
  --dur-fast: 0.2s;           /* @kind other */
  --dur-med:  0.3s;           /* @kind other */
  --dur-slow: 0.5s;           /* @kind other */
}

/* Alternate theme: V2 Basquiat (wit/zwart) — wrap a section in this class */
.theme-basquiat {
  --bg:         var(--basquiat-white);
  --bg-alt:     var(--basquiat-yellow);
  --bg-dark:    var(--basquiat-black);
  --fg:         var(--basquiat-black);
  --fg-on-dark: var(--basquiat-white);
  --fg-muted:   var(--basquiat-grey-500);
  --accent-1:   var(--basquiat-red);
  --accent-2:   var(--basquiat-blue);
  --accent-3:   var(--basquiat-yellow);
  --border:     var(--basquiat-black);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — applied when this file is loaded standalone
   Components in /ui_kits inherit these vars but apply their own classes.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--size-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;          /* Anton is single-weight */
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.9;
  margin: 0;
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p { margin: 0; line-height: 1.6; }

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-default);
}

::selection {
  background: var(--basquiat-yellow);
  color: var(--basquiat-black);
}

/* =========================================================================
   COMPONENT PRIMITIVES — reusable, exposed via DS components.
   ========================================================================= */

/* Button — lime CTA pill with hard offset shadow + ragtag tilt */
.ds-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
  cursor: pointer;
  border: none;
  transform: rotate(-1deg);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ds-btn--primary {
  background: var(--live-yellow);
  color: #000;
  box-shadow: 5px 5px 0 #000;
}
.ds-btn--primary:hover {
  transform: rotate(0deg) translate(-1px, -1px) scale(1.03);
  box-shadow: 8px 8px 0 var(--live-pink);
}
.ds-btn--ghost {
  background: transparent;
  color: var(--live-yellow);
  border: 1px solid var(--live-yellow);
  box-shadow: none;
}
.ds-btn--ghost:hover {
  background: var(--live-yellow);
  color: #000;
  transform: rotate(-1deg);
}

/* TapeHeader — marker-tape section label with hard shadow */
.ds-tape {
  display: inline-block;
  font-family: var(--font-marker);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  padding: 0.5rem 2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ds-tape--yellow {
  background: var(--live-yellow);
  color: #000;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
}
.ds-tape--pink {
  background: var(--live-pink);
  color: #000;
  transform: rotate(1.5deg);
  box-shadow: 5px 5px 0 var(--live-yellow);
}

/* =========================================================================
   UTILITY PATTERNS — the "tells" of the brand. Reuse anywhere.
   ========================================================================= */

/* Crossed-out correction (manifesto) */
.t-crossed { position: relative; color: var(--basquiat-grey-500); }
.t-crossed::after {
  content: ""; position: absolute; top: 50%; left: -5%;
  width: 110%; height: 5px;
  background: var(--basquiat-red); transform: rotate(-2deg);
}

/* Yellow highlight block with rotation */
.t-highlight {
  color: var(--basquiat-black);
  background: var(--basquiat-yellow);
  padding: 0 1rem;
  display: inline-block;
  transform: rotate(var(--rot-highlight));
}

/* Hand-drawn circle around a word */
.t-circle { position: relative; display: inline-block; padding: 0 10px; }
.t-circle::after {
  content: ""; position: absolute; top: -10%; left: -5%;
  width: 110%; height: 120%;
  border: 3px solid var(--basquiat-red);
  border-radius: 50% 60% 40% 70%;
  transform: rotate(-5deg);
}

/* Yellow tape-tag (section anchor) */
.t-tape {
  display: inline-block;
  background: var(--basquiat-yellow);
  color: var(--basquiat-black);
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.5rem 1rem;
  box-shadow: var(--shadow-tag);
  transform: rotate(var(--rot-tape));
}

/* Stamp / badge (black bg, white border, red shadow) */
.t-stamp {
  display: inline-block;
  background: var(--basquiat-black);
  color: var(--basquiat-white);
  font-family: var(--font-mono);
  padding: 0.5rem 1rem;
  border: var(--border-stamp);
  box-shadow: var(--shadow-stamp);
  transform: rotate(var(--rot-stamp));
}

/* Marker scribble (Permanent Marker, accented) */
.t-marker { font-family: var(--font-marker); color: var(--basquiat-red); }

/* Scribble (Rock Salt) */
.t-scribble { font-family: var(--font-scribble); }

/* Underline accent — title style */
.t-underline {
  text-decoration: underline;
  text-decoration-color: var(--basquiat-red);
  text-decoration-thickness: 5px;
  text-underline-offset: 4px;
}

/* =========================================================================
   ANIMATIONS — bounce, shake, wiggle, dash, draw
   ========================================================================= */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes shake {
  0%, 100% { transform: translate(1px, 1px) rotate(0deg); }
  20%      { transform: translate(-3px, 0px) rotate(1deg); }
  40%      { transform: translate(1px, -1px) rotate(1deg); }
  60%      { transform: translate(-3px, 1px) rotate(0deg); }
  80%      { transform: translate(-1px, -1px) rotate(1deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(var(--rotation, 0deg)) translate(0, 0); }
  25%      { transform: rotate(var(--rotation, 0deg)) translate(2px, 2px); }
  50%      { transform: rotate(var(--rotation, 0deg)) translate(-2px, -2px); }
  75%      { transform: rotate(var(--rotation, 0deg)) translate(2px, -2px); }
}
@keyframes dash {
  to { stroke-dashoffset: 1000; }
}
@keyframes draw {
  from { stroke-dasharray: 0 1000; }
  to   { stroke-dasharray: 1000 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}