/* ============================================================
   RAUSCH — Colors & Type
   Neobrutalist · Berlin techno flyer · sharp / raw / high-contrast
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* -------- COLOR · CORE -------- */
  --bg:           #000000;   /* page / canvas */
  --fg:           #FFFFFF;   /* primary text + borders */
  --accent:       #CC0000;   /* CTA · alarm · highlight */
  --muted:        #999999;   /* secondary text · timestamps · meta */
  --hairline:     #FFFFFF;   /* border color (use with --border-w) */

  /* -------- COLOR · EXTENDED (use sparingly) -------- */
  --accent-hot:   #FF1A1A;   /* hover/pressed state of accent */
  --accent-dim:   #800000;   /* disabled / pressed-down red */
  --fg-dim:       #CCCCCC;   /* slightly knocked-back white */
  --grid:         #1A1A1A;   /* near-black for low-contrast hairlines on bg */
  --warn:         #FFCC00;   /* rarely used; flyer-yellow */

  /* -------- BORDERS -------- */
  --border-w:       2px;     /* default */
  --border-w-thick: 3px;     /* hero / cards / buttons */
  --border-w-mega:  6px;     /* dividers, section breaks */
  --border:         var(--border-w) solid var(--fg);
  --border-thick:   var(--border-w-thick) solid var(--fg);
  --border-mega:    var(--border-w-mega) solid var(--fg);
  --border-accent:  var(--border-w-thick) solid var(--accent);

  /* -------- RADIUS -------- */
  /* Neobrutalism: sharp. Always. Variable exists only to ENFORCE 0. */
  --radius:       0;
  --radius-pill:  0;   /* even pills are square */

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

  /* -------- SHADOWS -------- */
  /* No soft shadows. Hard offset blocks only (optional). */
  --shadow-none: none;
  --shadow-hard:   4px 4px 0 0 var(--fg);
  --shadow-hard-r: 4px 4px 0 0 var(--accent);
  --shadow-stack:  4px 4px 0 0 var(--fg), 8px 8px 0 0 var(--accent);

  /* -------- TYPE · FAMILIES -------- */
  --font-display: 'Bebas Neue', 'Oswald', 'Impact', 'Haettenschweiler', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* -------- TYPE · SIZE -------- */
  --t-display:    96px;
  --t-h1:         64px;
  --t-h2:         48px;
  --t-h3:         32px;
  --t-h4:         24px;
  --t-eyebrow:    14px;
  --t-body:       16px;
  --t-small:      13px;
  --t-micro:      11px;

  /* -------- TYPE · TRACKING -------- */
  --tr-tight:   -0.02em;
  --tr-normal:   0;
  --tr-loose:    0.04em;
  --tr-mega:     0.12em;

  /* -------- LAYOUT -------- */
  --screen-w:   375px;
  --gutter:     16px;

  /* -------- MOTION -------- */
  /* Snap. No bounce. No easing curves. */
  --dur-instant: 0ms;
  --dur-snap:    80ms;
  --dur-quick:   120ms;
  --ease:        linear;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: 0.88;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: 0.9;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 0.92;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 0.95;
  letter-spacing: var(--tr-normal);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  line-height: 1.15;
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: var(--tr-mega);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.45;
  letter-spacing: var(--tr-normal);
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}

.small {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.35;
  font-weight: 400;
  color: var(--muted);
}

.micro {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  line-height: 1.2;
  letter-spacing: var(--tr-loose);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

code, .code {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
  background: transparent;
}

/* ============================================================
   BASE
   ============================================================ */

* { box-sizing: border-box; }

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

::selection {
  background: var(--accent);
  color: var(--fg);
}

a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--accent); }