/* =======================================================
   RM Impact · colors_and_type.css
   Master stylesheet — color + type tokens + semantic vars
   Imports the design-token base, then adds semantic
   convenience vars (h1, h2, fg1, fg2, etc) for everyday use.
   Direction: Industrial Monolith · v1.0.0
   ======================================================= */

/* Brand fonts — Space Grotesk · Inter · JetBrains Mono (local-first, CDN fallback) */
@import url('fonts/fonts.css');

:root {
  /* ------------------------------------------------------------------
     CORE PALETTE (raw)
     ------------------------------------------------------------------ */
  --rm-graphite:    #1A1F24;   /* Primary dark · hero · logo · foreground */
  --rm-graphite-95: #0F1318;   /* Deepest — section dividers in dark mode */
  --rm-slate:       #3D3E42;   /* Secondary surfaces, dark-mode borders */
  --rm-concrete:    #8A8478;   /* Mid-neutral · FLÄCHEN/LINIEN/Dekor — NICHT für Text:
                                  2,88:1 auf Bone, 4,47:1 auf Graphite (beide < AA 4,5) */
  --rm-concrete-ink:  #5A5751; /* Gedämpfter TEXT auf hellem Träger · 5,58:1 auf Bone */
  --rm-concrete-lite: #9C968A; /* Gedämpfter TEXT auf dunklem Träger · 5,64:1 auf Graphite */
  --rm-bone:        #E8E2D6;   /* Primary light carrier · body bg */
  --rm-paper:       #F4F1EC;   /* Sub-light · section change · cards */
  --rm-surface:     #FDFBF7;   /* Highest elevation light */

  --rm-brass:       #C9A55C;   /* Accent on dark · ²-glyph · KPI */
  --rm-brass-soft:  #E5D2A0;   /* Subtle hover / highlight light */
  --rm-bronze:      #8B6B2E;   /* Accent on light · print · hover */

  --rm-success:     #5C7A4B;   /* Olive — kein Tech-Neon */
  --rm-warning:     #B07C2E;   /* Bronze-harmonisch */
  --rm-danger:      #8C2F2A;   /* Gedecktes Burgundy */
  --rm-info:        #3E5A6B;   /* Petrol */

  /* ------------------------------------------------------------------
     SEMANTIC VARS · DEFAULT = LIGHT MODE
     ------------------------------------------------------------------ */
  --bg:           var(--rm-bone);
  --bg-alt:       var(--rm-paper);
  --bg-elevated: var(--rm-surface);
  --bg-inverse:   var(--rm-graphite);

  --fg1:          var(--rm-graphite);   /* Primary text */
  --fg2:          var(--rm-slate);      /* Secondary text / lead */
  --fg3:          var(--rm-concrete-ink);   /* Metadata / captions — lesbar auf Bone */
  --fg-inverse:   var(--rm-bone);

  --border:        rgba(26, 31, 36, 0.13);
  --border-strong: rgba(26, 31, 36, 0.33);
  --rule:          rgba(26, 31, 36, 1);

  --accent:        var(--rm-bronze);    /* Light-mode accent */
  --accent-soft:   var(--rm-brass-soft);
  --accent-on-dark:var(--rm-brass);     /* Same role on graphite */

  --link:          var(--rm-bronze);
  --link-hover:    var(--rm-graphite);

  /* ------------------------------------------------------------------
     TYPE FAMILIES
     ------------------------------------------------------------------ */
  --font-display: 'Space Grotesk', 'Söhne', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:    'Inter', 'Söhne', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ------------------------------------------------------------------
     TYPE SCALE (size / line-height / letter-spacing)
     ------------------------------------------------------------------ */
  --t-display-xl: 88px;  --lh-display-xl: 92px;  --ls-display-xl: -0.035em;
  --t-display-l:  64px;  --lh-display-l:  68px;  --ls-display-l:  -0.030em;
  --t-display-m:  48px;  --lh-display-m:  52px;  --ls-display-m:  -0.025em;
  --t-h1:         36px;  --lh-h1:         40px;  --ls-h1:         -0.020em;
  --t-h2:         28px;  --lh-h2:         32px;  --ls-h2:         -0.015em;
  --t-h3:         20px;  --lh-h3:         26px;  --ls-h3:         -0.010em;
  --t-lead:       20px;  --lh-lead:       30px;  --ls-lead:       -0.005em;
  --t-body:       16px;  --lh-body:       26px;  --ls-body:        0; /* @kind spacing */
  --t-body-s:     14px;  --lh-body-s:     22px;  --ls-body-s:      0; /* @kind spacing */
  --t-caption:    12px;  --lh-caption:    18px;  --ls-caption:    0.010em;
  --t-mono-m:     13px;  --lh-mono-m:     20px;  --ls-mono-m:     0.020em;
  --t-mono-s:     11px;  --lh-mono-s:     16px;  --ls-mono-s:     0.080em;
  --t-mono-xs:     9px;  --lh-mono-xs:    12px;  --ls-mono-xs:    0.180em;

  /* ------------------------------------------------------------------
     SPACING · 4px baseline
     ------------------------------------------------------------------ */
  --s-1:  4px;   --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;   --s-10:128px;

  /* ------------------------------------------------------------------
     GRID
     ------------------------------------------------------------------ */
  --grid-columns:   12; /* @kind other */
  --grid-gutter:    24px;
  --grid-max:       1280px;
  --square-tile:    80px;     /* the ²-DNA — 8-col square overlay */

  /* ------------------------------------------------------------------
     RADII (industrial: minimal)
     ------------------------------------------------------------------ */
  --r-0: 0; /* @kind radius */
  --r-1: 2px;
  --r-2: 4px;

  /* ------------------------------------------------------------------
     BORDERS — hair / thin / strong
     ------------------------------------------------------------------ */
  --bw-hair: 1px;
  --bw-thin: 1.5px;
  --bw-bold: 2px;

  /* ------------------------------------------------------------------
     MOTION — sharp, ungrazious
     ------------------------------------------------------------------ */
  --ease:         cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --m-fast:       120ms var(--ease);
  --m-med:        240ms var(--ease);
  --m-slow:       480ms var(--ease);

  /* ------------------------------------------------------------------
     SLIDE GEOMETRY (16:9 · 1920×1080 working canvas)
     ------------------------------------------------------------------ */
  --slide-w:      1920px;
  --slide-h:      1080px;
  --slide-pad-x:  96px;   /* 0.5in @ 96dpi × 2 = sides */
  --slide-pad-t:  115px;  /* 0.6in @ 96dpi */
  --slide-pad-b:  96px;   /* 0.5in */
}

/* =======================================================
   DARK MODE — Graphite carrier · brass accent
   ======================================================= */
[data-rm-mode="dark"],
.rm-dark {
  --bg:           var(--rm-graphite);
  --bg-alt:       var(--rm-graphite-95);
  --bg-elevated:  var(--rm-slate);
  --bg-inverse:   var(--rm-bone);

  --fg1:          var(--rm-bone);
  --fg2:          #C0BBB0;
  --fg3:          var(--rm-concrete-lite);   /* lesbar auf Graphite */
  --fg-inverse:   var(--rm-graphite);

  --border:        rgba(232, 226, 214, 0.13);
  --border-strong: rgba(232, 226, 214, 0.33);
  --rule:          rgba(232, 226, 214, 1);

  --accent:        var(--rm-brass);
  --accent-soft:   var(--rm-brass-soft);

  --link:          var(--rm-brass);
  --link-hover:    var(--rm-bone);
}

/* =======================================================
   SEMANTIC ELEMENT DEFAULTS
   ======================================================= */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin: 0;
}

.display-xl { font-family: var(--font-display); font-weight: 500; font-size: var(--t-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }
.display-l  { font-family: var(--font-display); font-weight: 500; font-size: var(--t-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--ls-display-l); }
.display-m  { font-family: var(--font-display); font-weight: 500; font-size: var(--t-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--ls-display-m); }

.lead       { font-family: var(--font-body); font-weight: 400; font-size: var(--t-lead);    line-height: var(--lh-lead);    letter-spacing: var(--ls-lead);    color: var(--fg2); }
.body       { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body);    line-height: var(--lh-body); }
.body-s     { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-s);  line-height: var(--lh-body-s); }
.caption    { font-family: var(--font-body); font-weight: 400; font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--fg3); }

.mono-m     { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono-m);  line-height: var(--lh-mono-m);  letter-spacing: var(--ls-mono-m); }
.mono-s     { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono-s);  line-height: var(--lh-mono-s);  letter-spacing: var(--ls-mono-s);  text-transform: uppercase; }
.mono-xs    { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono-xs); line-height: var(--lh-mono-xs); letter-spacing: var(--ls-mono-xs); text-transform: uppercase; }

/* The signature gesture — kursive Hebel-Begriffe in Brass */
.lever { font-style: italic; font-weight: 500; color: var(--accent); }

/* Eyebrow — every slide and every section starts with one */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono-s);
  letter-spacing: var(--ls-mono-s);
  text-transform: uppercase;
  color: var(--accent);
}

/* Crown-bar (top of every content slide) */
.crown {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono-s);
  letter-spacing: var(--ls-mono-s);
  text-transform: uppercase;
  color: var(--fg3);
}

/* Hairline rule */
hr, .hr { border: none; border-top: var(--bw-hair) solid var(--border); margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--m-fast);
}
a:hover { color: var(--link-hover); }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 1px 6px;
}