/* ============================================================
   BODYGRINDWERK — Core Tokens
   colors + typography. Import this in every artifact.
   ============================================================ */

/* Google Fonts @import removed — fonts are self-hosted via styles/fonts.css (DSGVO) */

:root {
  /* ---------- SURFACE (dark base) ---------- */
  --bg-0:        #0A0B0D;   /* page / deepest */
  --bg-1:        #111317;   /* surface */
  --bg-2:        #181B21;   /* elevated surface */
  --bg-3:        #20242C;   /* hovered / pressed */
  --bg-inverse:  #F2F3F5;   /* light spotlight */

  /* ---------- BORDERS ---------- */
  --border-1:    #23272F;   /* hairlines, dividers */
  --border-2:    #2E333D;   /* card borders */
  --border-3:    #3A4150;   /* emphasised borders, inputs */
  --border-strong:#5A6273;

  /* ---------- FOREGROUND ---------- */
  --fg-1:        #F4F5F7;   /* primary text on dark */
  --fg-2:        #B3B8C2;   /* secondary text */
  --fg-3:        #7A808C;   /* tertiary / captions */
  --fg-4:        #4D525C;   /* disabled / decorative */
  --fg-inverse:  #0A0B0D;

  /* ---------- BRAND ACCENT ---------- */
  --accent:       #2A6FDB;  /* electric blue — primary signal */
  --accent-hover: #4090F5;
  --accent-press: #1F5BBF;
  --accent-soft:  #0B1A33;  /* tinted bg for accent surfaces */
  --on-accent:    #FFFFFF;

  /* ---------- STEEL (secondary structural) ---------- */
  --steel-1:      #3F4751;  /* deep steel — used in mark */
  --steel-2:      #5C6571;  /* steel highlight */
  --steel-3:      #2A2F36;  /* steel shadow */

  /* ---------- SEMANTIC SIGNAL ---------- */
  --fakt:        #4ADE80;   /* green — "Fakt" */
  --fakt-soft:   #0F2618;
  --mythos:      #FF4E3A;   /* red — "Mythos" */
  --mythos-soft: #2A0F0B;
  --caution:     #FFB020;   /* amber — caution / nuance */
  --caution-soft:#2A1E08;
  --info:        #5CC8FF;   /* cyan — data / spec */
  --info-soft:   #08222E;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-body:    "Inter Tight", "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE (fluid-ish, base 16) ---------- */
  --t-hero:    clamp(56px, 7vw, 96px);
  --t-display: clamp(40px, 5vw, 64px);
  --t-h1:      40px;
  --t-h2:      30px;
  --t-h3:      22px;
  --t-h4:      18px;
  --t-body:    16px;
  --t-sm:      14px;
  --t-xs:      12px;
  --t-micro:   10px;

  /* ---------- WEIGHTS ---------- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;
  --w-black:    800;

  /* ---------- TRACKING ---------- */
  --tr-tight:   -0.03em;
  --tr-snug:    -0.01em;
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-wider:    0.12em;     /* mono labels, eyebrows */
  --tr-widest:   0.22em;     /* category tags */

  /* ---------- SPACING (4-grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- RADIUS (sharp — engineered feel) ---------- */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  6px;
  --r-4:  10px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 0 0 rgba(255,255,255,0.03) inset;
  --shadow-3: 0 24px 60px -20px rgba(0,0,0,0.7);
  --glow-accent: 0 0 0 1px var(--accent), 0 0 40px -8px rgba(42,111,219,0.55);

  /* ---------- GRID / PATTERN ---------- */
  --grid-line: rgba(255,255,255,0.04);
  --grid-line-strong: rgba(255,255,255,0.08);
}

/* ============================================================
   SEMANTIC TYPE STYLES — use these directly in components.
   ============================================================ */

.t-hero {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-hero);
  line-height: 0.92;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}

.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: var(--tr-tight);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: var(--tr-snug);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: var(--tr-snug);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-h3);
  line-height: 1.2;
}

.t-h4 {
  font-family: var(--font-body);
  font-weight: var(--w-semi);
  font-size: var(--t-h4);
  line-height: 1.3;
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-2);
}

.t-sm {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg-2);
}

/* monospace data / readouts — used heavily for "labor" feeling */
.t-data {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wide);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

/* eyebrow / category label — uppercase wide mono */
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* "stamp"-style category tag — for thumbnails */
.t-stamp {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
}

/* the BIG thumbnail headline */
.t-thumb {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* ============================================================
   GLOBAL RESETS / BASE
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* lab/grid backdrop helper */
.bg-grid {
  background-color: var(--bg-0);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-dots {
  background-color: var(--bg-0);
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* corner-bracket frame — recurring brand device */
.brackets {
  position: relative;
}
.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
}
.brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brackets::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }