/* ============================================================
   NF AUDIO — Veranstaltungstechnik
   colors_and_type.css — design tokens (color + type)
   ------------------------------------------------------------
   Brand: sound & light tech for live events. Dark "stage"
   surfaces, one strong electric blue, crisp white type.
   ============================================================ */

/* --- Fonts (Google Fonts CDN — see note in README) -------- */
/* Serifenlos durchgängig: Archivo (Display), Barlow (Body), JetBrains Mono (Labels/Eyebrows). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Barlow:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND COLOR ---------- */
  --brand-blue:        #004FB6;   /* sampled from logo */
  --brand-blue-600:    #0A5CCB;   /* hover / lift */
  --brand-blue-700:    #003C8A;   /* press / deep */
  --brand-blue-300:    #4D87DC;   /* light accent, links on dark */
  --brand-blue-tint:   #E7EFFA;   /* faint blue wash on light */

  /* ---------- STAGE NEUTRALS (dark, default surface) ---------- */
  --stage-000: #05080C;   /* deepest backdrop (near black) */
  --stage-050: #0B0F14;   /* page background */
  --stage-100: #11161D;   /* raised surface / card */
  --stage-200: #1A212B;   /* card border / hairline up */
  --stage-300: #28323F;   /* divider, inactive */
  --stage-400: #3C4858;   /* muted lines */

  /* ---------- NOIR / PAPER (website v2 — editorial bold) ---------- */
  --noir:     #0A0A0A;    /* v2 page background */
  --noir-2:   #141414;    /* v2 raised surface */
  --noir-3:   #1C1C1C;    /* v2 hairline-strong / scrollbar */
  --paper:    #F2F0EA;    /* v2 ink on dark + light sections */
  --paper-2:  #E4E1D7;    /* v2 paper, one step down */
  --ink-soft: #9A968B;    /* v2 secondary text (warm grey) */
  --neon:     #004FB6;    /* alias: brand blue as the single accent */

  /* ---------- INK ---------- */
  --ink-000: #FFFFFF;   /* primary on dark */
  --ink-100: #E8EBF0;   /* default body on dark */
  --ink-300: #A7B0BD;   /* secondary text */
  --ink-500: #707A88;   /* muted / captions */
  --ink-700: #444E5B;   /* disabled */

  /* ---------- LIGHT-MODE NEUTRALS (rare; forms, print) ---------- */
  --paper-000: #FFFFFF;
  --paper-050: #F4F6F9;
  --paper-100: #E6EAF0;
  --paper-ink: #11161D;

  /* ---------- SEMANTIC ---------- */
  --ok:     #2FB67C;
  --warn:   #E8A317;
  --danger: #E2483D;

  /* ---------- TYPE FAMILIES (alle serifenlos) ---------- */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif; /* heavy headlines: 900, VERSALIEN, lh ~0.9 */
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;   /* UI + copy */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;        /* eyebrows, labels, numbers, buttons */
  --font-script:  var(--font-mono); /* DEPRECATED — script accent retired; resolves to mono */

  /* ---------- TYPE SCALE (fluid-ish, px base) ---------- */
  --t-hero:   clamp(48px, 7vw, 88px); /* @kind font */
  --t-h1:     clamp(36px, 4.6vw, 60px); /* @kind font */
  --t-h2:     clamp(28px, 3.2vw, 40px); /* @kind font */
  --t-h3:     22px;
  --t-h4:     18px;
  --t-body:   17px;
  --t-small:  15px;
  --t-cap:    13px;
  --t-micro:  11px;

  /* ---------- WEIGHTS ---------- */
  --w-light: 300;  /* @kind font */
  --w-reg:   400;  /* @kind font */
  --w-med:   500;  /* @kind font */
  --w-semi:  600;  /* @kind font */
  --w-bold:  700;  /* @kind font */
  --w-black: 900;  /* @kind font */

  /* ---------- RADII ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- SHADOWS / GLOW ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --glow-blue: 0 0 0 1px rgba(10,92,203,.5), 0 8px 30px rgba(10,92,203,.35);
}

/* ============================================================
   SEMANTIC TYPE — apply on top of a dark stage by default
   ============================================================ */
.nf-hero {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-hero);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink-000);
}
.nf-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink-000);
}
.nf-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--ink-000);
}
.nf-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--ink-100);
}
/* the brand's signature two-part headline: heavy lead + muted kicker (same family, smaller) */
.nf-kicker {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-h4);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink-300);
}
/* DEPRECATED — handwritten script retired; kept so old mocks keep working (renders mono) */
.nf-script {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.55em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue-300);
}
.nf-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.nf-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-semi);
  font-size: var(--t-cap);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-300);
}
.nf-body {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-100);
}
.nf-small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-300);
}
.nf-cap {
  font-family: var(--font-body);
  font-size: var(--t-cap);
  color: var(--ink-500);
}