/* ============================================================
   CROTONA — Colors & Type
   House- en discomerk uit Nijmegen.
   Warm, meeslepend, zelfverzekerd. Retro-disco × ondergrondse club.
   ============================================================ */

/* ---------- FONTS ---------- */
/* Self-hosted: Big Noodle Titling (display) + Space Grotesk (body/UI).
   Bestanden in ../fonts/, geserveerd lokaal i.v.m. AVG en performance. */

@font-face {
  font-family: "Big Noodle Titling";
  src: url("../fonts/big-noodle-titling.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Big Noodle Titling";
  src: url("../fonts/big-noodle-titling-oblique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ============ COLOR — RAW PALETTE ============
     Sourced directly from Figma METADATA.md (top 9 colors)
     plus the logo's lightning-yolk yellow. */
  --crotona-ink:        rgb(35, 37, 34);     /* #232522  — near-black, warm */
  --crotona-cream:      rgb(250, 243, 227);  /* #faf3e3  — paper / parchment */
  --crotona-white:      rgb(255, 255, 255);  /* #ffffff  — used sparingly */
  --crotona-black:      rgb(0, 0, 0);        /* pure black — only for shadow stamps */

  /* accent set — secondary disco palette pulled from the .fig */
  --crotona-bolt:       rgb(255, 212, 97);   /* #ffd461 — logo lightning yellow */
  --crotona-teal:       rgb(15, 113, 132);   /* #0f7184 — deep disco teal */
  --crotona-sky:        rgb(137, 213, 239);  /* #89d5ef — pale sky blue */
  --crotona-blush:      rgb(255, 166, 177);  /* #ffa6b1 — warm coral / blush */
  --crotona-lilac:      rgb(164, 130, 196);  /* #a482c4 — dusty lavender */
  --crotona-tomato:     rgb(255, 107, 91);   /* #ff6b5b — paste-up tomato red voor pulse dot */

  /* tonal variants of the ink for layering on cream */
  --crotona-ink-90:     rgba(35, 37, 34, 0.90);
  --crotona-ink-70:     rgba(35, 37, 34, 0.70);
  --crotona-ink-50:     rgba(35, 37, 34, 0.50);
  --crotona-ink-25:     rgba(35, 37, 34, 0.25);
  --crotona-ink-10:     rgba(35, 37, 34, 0.10);

  /* tonal variants of cream for layering on ink */
  --crotona-cream-90:   rgba(250, 243, 227, 0.90);
  --crotona-cream-70:   rgba(250, 243, 227, 0.70);
  --crotona-cream-50:   rgba(250, 243, 227, 0.50);
  --crotona-cream-25:   rgba(250, 243, 227, 0.25);

  /* ============ COLOR — SEMANTIC ============
     "Crème op donker is de standaard" — cream-on-ink is the
     default. White-on-black is too techno; black-on-white too
     corporate. */
  --bg:                 var(--crotona-cream);   /* homepage default = paper */
  --bg-alt:             var(--crotona-ink);
  --fg:                 var(--crotona-ink);     /* primary text on default bg */
  --fg-alt:             var(--crotona-cream);   /* primary text on alt bg */
  --fg-muted:           var(--crotona-ink-70);
  --fg-muted-alt:       var(--crotona-cream-70);
  --accent:             var(--crotona-bolt);     /* the lightning-yellow accent */
  --line:               var(--crotona-ink);      /* heavy 3–4px borders */
  --line-soft:          var(--crotona-ink-25);

  /* ============ TYPE FAMILIES ============
     Brand-besluit: alle UI tekst is Space Grotesk. Big Noodle is in
     het project alleen nog als wordmark-asset (image/SVG); display
     headings (h1/h2) gebruiken Space Grotesk Bold. */
  --font-display:  "Space Grotesk", "Inter", -apple-system,
                   "Helvetica Neue", Arial, sans-serif;
  --font-body:     "Space Grotesk", "Inter", -apple-system,
                   "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ============ TYPE SCALE (slightly retro-poster) ============
     Display sizes lean BIG. Body stays generous and breathable. */
  --fs-display-xl:  clamp(72px, 12vw, 200px);
  --fs-display-l:   clamp(56px, 8vw, 120px);
  --fs-display-m:   clamp(40px, 5vw, 72px);
  --fs-display-s:   40px;            /* matches Figma TITELFONT @ 40px */
  --fs-h1:          64px;            /* matches Figma "TITEL FONT" 64px */
  --fs-h2:          48px;
  --fs-h3:          32px;
  --fs-h4:          26px;
  --fs-body-l:      20px;            /* Figma body 20px */
  --fs-body:        18px;            /* Figma body 18px */
  --fs-body-s:      16px;
  --fs-caption:     13px;

  /* ============ TYPE WEIGHTS ============ */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;             /* Figma's most-used weight */
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ============ LINE HEIGHTS ============ */
  --lh-tight:       1.0;             /* display, posters */
  --lh-snug:        1.15;            /* Figma body lh */
  --lh-normal:      1.4;
  --lh-loose:       1.6;             /* long-form copy that "breathes" */

  /* ============ TRACKING ============ */
  --tr-display:     -0.01em;
  --tr-caps:        0.04em;
  --tr-body:        0;

  /* ============ SHAPE ============
     Crotona uses HARD edges. The buttons in Figma are drawn as
     plain rectangles with thick 3-4px borders. No rounding. */
  --radius-none:    0;
  --radius-xs:      2px;             /* almost imperceptible */
  --radius-s:       4px;
  --radius-m:       8px;             /* very rare; soft chips only */
  --radius-pill:    999px;           /* almost never */

  /* ============ BORDER WIDTHS ============ */
  --border-hair:    1px;
  --border-thin:    2px;
  --border-med:     3px;             /* Figma button border */
  --border-thick:   4px;             /* Figma quote-card border */
  --border-stamp:   6px;

  /* ============ SHADOWS ============
     Crotona's signature is the SOLID OFFSET STAMP shadow — a
     hard-edged duplicate behind the element, no blur. Plus a
     subtle skew for the 70s-poster tilt. */
  --shadow-stamp-sm: 4px 4px 0 0 var(--crotona-ink);
  --shadow-stamp:    6px 6px 0 0 var(--crotona-ink);
  --shadow-stamp-lg: 10px 10px 0 0 var(--crotona-ink);
  --shadow-stamp-cream: 6px 6px 0 0 var(--crotona-cream);
  --shadow-stamp-bolt:  6px 6px 0 0 var(--crotona-bolt);

  /* soft shadows used very rarely (blur is rare in this brand) */
  --shadow-soft:     0 8px 24px var(--crotona-ink-25);

  /* ============ SPACING (8pt baseline) ============ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ============ MOTION ============
     Crotona moves like a body on a dance floor — confident, slow,
     slightly delayed. No bounces, no spring. */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1.00);
  --ease-in-out:    cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --dur-fast:       180ms;
  --dur-base:       280ms;
  --dur-slow:       520ms;

  /* ============ TEXTURE ============
     Subtle paper grain layered over solid color. Apply via
     background-blend-mode: multiply on a noise SVG. */
  --grain-url:      url("../img/grain.svg");
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply directly to elements
   ============================================================ */

html { color-scheme: dark; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — Space Grotesk Bold uppercase, geen italic skew, geen
   triple drop-shadow. De prototype-PDF toont geometrische sans-serif
   met enkele harde stamp-shadow op gele knoppen, niet op headings. */
.cr-display,
.cr-poster {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

/* HEADINGS — Space Grotesk Bold, uppercase via CSS. Bron-text in
   patterns blijft lowercase per project-conventie. */
h1, .cr-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
h2, .cr-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
h3, .cr-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  margin: 0;
}
h4, .cr-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  margin: 0;
}

p, .cr-body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.cr-body-l { font-size: var(--fs-body-l); line-height: var(--lh-loose); }
.cr-body-s { font-size: var(--fs-body-s); line-height: var(--lh-normal); }
.cr-light  { font-weight: var(--fw-light); }
.cr-bold   { font-weight: var(--fw-bold); }

.cr-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  line-height: var(--lh-normal);
}

/* LINKS — quiet, underlined; brand color on hover */
a, .cr-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .cr-link:hover { color: var(--crotona-bolt); }

/* SELECTION — bolt-yellow on ink, like a marker pass */
::selection {
  background: var(--crotona-bolt);
  color: var(--crotona-ink);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.cr-paper       { background: var(--crotona-cream); color: var(--crotona-ink); }
.cr-ink         { background: var(--crotona-ink);   color: var(--crotona-cream); }
.cr-tilt        { transform: rotate(-2deg); }
.cr-tilt-back   { transform: rotate(2deg); }
.cr-skew        { transform: skewX(-6deg); }

.cr-grain {
  position: relative;
  isolation: isolate;
}
.cr-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain-url);
  background-size: 240px;
  mix-blend-mode: multiply;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}