/* ============================================================
   BLOOD DIAMOND TATTOO INK. — DESIGN TOKENS
   Richtung: NOIR ATELIER (editorial monochrome · Grün als einziger Puls)
   Quelle der Wahrheit. Jede Seite/Card/Ad importiert NUR diese Datei.
   Stand 2026-07-13 · Opus (Creative Director)
   ============================================================ */

:root {

  /* ---------- FARBE ----------
     Monochrom regiert. EIN Akzent: Grün (= die Studio-Farbe, das grüne
     Diamant). Gold ist NUR für Awards ("Goldene Nadel") — Mikro-Detail, nie Fläche. */

  --bd-void:        #0B0B0C;   /* das Feld — near-black Papier */
  --bd-black:       #0E0E10;   /* Sektions-Grund, leicht gehoben */
  --bd-panel:       #131316;   /* Panel / Karte */
  --bd-panel-2:     #191A1E;   /* Karte über Karte / Hover-Fläche */
  --bd-bone:        #ECE6DA;   /* helle Editorial-Karte (schwarze Schrift drauf) */

  --bd-ink:         #F2EFE8;   /* Text auf Dunkel — Bone-Off-White (= Logo) */
  --bd-ink-dim:     #9C978B;   /* Sekundärtext, warm-grau */
  --bd-ink-faint:   #5E5B54;   /* Captions, Meta, Deko-Labels */

  --bd-blood:       #1C6B49;   /* DER AKZENT — Samt-Smaragd (CTA, Highlights) */
  --bd-blood-hi:    #2E8B5E;   /* Puls/Hover/Glow — heller Partner */
  --bd-blood-deep:  #12352A;   /* Samt-dunkel — Panels, Verläufe */
  --bd-blood-soft:  #6FB496;   /* feine Highlights, entsättigt */

  --bd-gold:        #C9A227;   /* AWARDS ONLY — selten, wertvoll */

  --bd-line:        #26262B;   /* Haarlinie / Rahmen */
  --bd-line-2:      #34343B;   /* stärkere Trennung */

  /* Funktionale Aliase (Komponenten sprechen diese an) */
  --bg:      var(--bd-void);
  --panel:   var(--bd-panel);
  --ink:     var(--bd-ink);
  --muted:   var(--bd-ink-dim);
  --accent:  var(--bd-blood);
  --line:    var(--bd-line);

  /* ---------- TYPOGRAFIE ----------
     3 Familien. Anton = Poster-Wucht. Cormorant = eleganter Serif-Kontrast
     (italic, klein, über/unter dem großen Wort). Archivo = alles Grotesk
     (Body, Labels, UI). Zahlen werden als OUTLINE-Objekte gestaltet. */

  --font-display: 'Anton', 'Archivo', system-ui, sans-serif;   /* Versal-Statements */
  --font-serif:   'Cormorant Garamond', Georgia, serif;         /* italic Kontrast */
  --font-grotesk: 'Archivo', system-ui, -apple-system, sans-serif;

  /* Type-Scale (fluid, 8pt-verwandt) */
  --t-mega:  clamp(56px, 11vw, 148px);  /* Poster-Wort, Hero-Abspann */
  --t-h1:    clamp(40px, 7.2vw, 92px);
  --t-h2:    clamp(30px, 4.6vw, 54px);
  --t-h3:    clamp(21px, 2.2vw, 26px);
  --t-lead:  clamp(17px, 1.6vw, 20px);  /* Vorspann / Lead */
  --t-body:  16px;
  --t-small: 13.5px;
  --t-cap:   12px;                       /* Caption / Label */
  --t-num:   clamp(72px, 9vw, 120px);    /* gestaltete Outline-Zahl */

  /* Tracking (Versalien brauchen Luft) */
  --tr-label: 0.28em;   /* Kicker / Nav-Labels */
  --tr-wide:  0.42em;   /* sehr kleine Deko-Labels */
  --tr-head:  0.01em;   /* Poster-Headlines: fast kein Tracking, Anton ist eng */

  --lh-tight: 0.98;
  --lh-head:  1.04;
  --lh-body:  1.62;

  /* ---------- SPACING (8pt-Raster) ---------- */
  --s-1: 4px;
  --s0:  8px;
  --s1:  16px;
  --s2:  24px;
  --s3:  32px;
  --s4:  48px;
  --s5:  64px;
  --s6:  96px;
  --s7:  128px;
  --s8:  176px;

  --section-y:  clamp(72px, 11vw, 128px);  /* vertikale Sektions-Luft */
  --gutter:     clamp(20px, 5vw, 40px);     /* horizontaler Rand */
  --maxw:       1120px;                     /* Editorial-Satzbreite */
  --maxw-text:  680px;                      /* Lesetext-Breite */

  /* ---------- LINIEN / RADIUS / ORNAMENT ----------
     Editorial = scharf. Radius 0. Keine runden Buttons, keine Schlagschatten. */
  --hair:      1px;
  --stroke:    1.25px;   /* Ornament-Strich (Diamant-Facetten, 1px-Zeichnung) */
  --rule-w:    56px;     /* Akzent-Strich unter Kickern */
  --radius:    0;        /* KEINE Rundung — bewusst */

  /* ---------- BEWEGUNG ---------- */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-in:   cubic-bezier(.4,0,.2,1);
  --dur-rev:   0.72s;    /* Scroll-Reveal */
  --dur-hover: 0.22s;

  /* ---------- TEXTUR (als CSS-Variablen wiederverwendbar) ----------
     Filmkorn + Vignette vom Studio-Film, Irezumi/Flash-Linien nur 8–12%. */
  --grain-opacity: 0.06;
  --vignette: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.62) 100%);
  --spot: radial-gradient(circle, rgba(46,139,94,.14) 0%, transparent 60%); /* Ringlicht-Rot */

  /* ---------- Z ---------- */
  --z-grain: 90;
  --z-sticky: 95;
  --z-nav: 80;
}

/* Reduced-Motion respektieren (Awwwards-Basics) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-rev: 0.01s; --dur-hover: 0.01s; }
}