/* =======================================================
   RM Impact · BRAND DESIGN SYSTEM · v1.1.0
   Direction: Industrial Monolith (Echo-Quadrat)
   =======================================================
   Token-Konvention:
     --rm-{kategorie}-{rolle}-{variante}
   Beispiel:
     --rm-color-bg            Default-Träger (auto Light/Dark)
     --rm-color-accent        Akzent (Brass/Bronze)
     --rm-font-display        Display-Familie
     --rm-type-h1-size        h1 Schriftgröße
   ======================================================= */

@import './rm-fonts.css';

:root {
  /* -------- CORE PALETTE -------- */
  --rm-color-graphite:    #1A1F24;
  --rm-color-graphite-95: #0F1318;
  --rm-color-slate:       #3D3E42;
  --rm-color-concrete:    #8A8478;
  --rm-color-bone:        #E8E2D6;
  --rm-color-paper:       #F4F1EC;
  --rm-color-surface:     #FDFBF7;

  /* -------- ACCENT -------- */
  --rm-color-brass:       #C9A55C;
  --rm-color-brass-soft:  #E5D2A0;
  --rm-color-bronze:      #8B6B2E;

  /* -------- SEMANTIC -------- */
  --rm-color-success:     #5C7A4B;
  --rm-color-warning:     #B07C2E;
  --rm-color-danger:      #8C2F2A;
  --rm-color-info:        #3E5A6B;

  /* -------- DEFAULT MODE: LIGHT -------- */
  --rm-color-bg:          var(--rm-color-bone);
  --rm-color-bg-alt:      var(--rm-color-paper);
  --rm-color-bg-elevated: var(--rm-color-surface);
  --rm-color-fg:          var(--rm-color-graphite);
  --rm-color-fg-muted:    var(--rm-color-slate);
  --rm-color-fg-subtle:   var(--rm-color-concrete);
  --rm-color-border:      rgba(26, 31, 36, 0.13);
  --rm-color-border-strong: rgba(26, 31, 36, 0.33);
  --rm-color-accent:      var(--rm-color-bronze);
  --rm-color-accent-fg:   var(--rm-color-bone);

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

  /* -------- TYPOGRAPHY · SCALE -------- */
  --rm-type-display-xl-size: 88px;  --rm-type-display-xl-lh: 92px;  --rm-type-display-xl-ls: -0.035em;
  --rm-type-display-l-size:  64px;  --rm-type-display-l-lh:  68px;  --rm-type-display-l-ls:  -0.030em;
  --rm-type-display-m-size:  48px;  --rm-type-display-m-lh:  52px;  --rm-type-display-m-ls:  -0.025em;
  --rm-type-h1-size:         36px;  --rm-type-h1-lh:         40px;  --rm-type-h1-ls:         -0.020em;
  --rm-type-h2-size:         28px;  --rm-type-h2-lh:         32px;  --rm-type-h2-ls:         -0.015em;
  --rm-type-h3-size:         20px;  --rm-type-h3-lh:         26px;  --rm-type-h3-ls:         -0.010em;
  --rm-type-lead-size:       20px;  --rm-type-lead-lh:       30px;  --rm-type-lead-ls:       -0.005em;
  --rm-type-body-size:       16px;  --rm-type-body-lh:       26px;  --rm-type-body-ls:        0;
  --rm-type-body-s-size:     14px;  --rm-type-body-s-lh:     22px;  --rm-type-body-s-ls:      0;
  --rm-type-caption-size:    12px;  --rm-type-caption-lh:    18px;  --rm-type-caption-ls:    0.01em;
  --rm-type-mono-m-size:     13px;  --rm-type-mono-m-lh:     20px;  --rm-type-mono-m-ls:     0.02em;
  --rm-type-mono-s-size:     11px;  --rm-type-mono-s-lh:     16px;  --rm-type-mono-s-ls:     0.08em;
  --rm-type-mono-xs-size:    9px;   --rm-type-mono-xs-lh:    12px;  --rm-type-mono-xs-ls:    0.18em;

  /* -------- SPACING (4px-Baseline) -------- */
  --rm-space-1: 4px;   --rm-space-2: 8px;   --rm-space-3: 12px;  --rm-space-4: 16px;
  --rm-space-5: 24px;  --rm-space-6: 32px;  --rm-space-7: 48px;  --rm-space-8: 64px;
  --rm-space-9: 96px;  --rm-space-10: 128px;

  /* -------- GRID -------- */
  --rm-grid-columns: 12;
  --rm-grid-gutter: 24px;
  --rm-grid-max-width: 1280px;
  --rm-square-tile: 80px;     /* Square-Module — Quadrat-Tiles für ²-DNA */

  /* -------- RADII (industriell: minimal) -------- */
  --rm-radius-0: 0;
  --rm-radius-1: 2px;
  --rm-radius-2: 4px;

  /* -------- BORDER WIDTHS -------- */
  --rm-border-hair: 1px;
  --rm-border-thin: 1.5px;

  /* -------- MOTION -------- */
  --rm-motion-fast:   120ms cubic-bezier(0.2, 0, 0, 1);
  --rm-motion-medium: 240ms cubic-bezier(0.2, 0, 0, 1);
  --rm-motion-slow:   480ms cubic-bezier(0.2, 0, 0, 1);
}

/* =======================================================
   DARK MODE
   ======================================================= */
[data-rm-mode="dark"] {
  --rm-color-bg:          var(--rm-color-graphite);
  --rm-color-bg-alt:      var(--rm-color-graphite-95);
  --rm-color-bg-elevated: var(--rm-color-slate);
  --rm-color-fg:          var(--rm-color-bone);
  --rm-color-fg-muted:    #C0BBB0;
  --rm-color-fg-subtle:   var(--rm-color-concrete);
  --rm-color-border:      rgba(232, 226, 214, 0.13);
  --rm-color-border-strong: rgba(232, 226, 214, 0.33);
  --rm-color-accent:      var(--rm-color-brass);
  --rm-color-accent-fg:   var(--rm-color-graphite);
}

/* =======================================================
   UTILITY KLASSEN
   ======================================================= */
.rm-display-xl { font-family: var(--rm-font-display); font-weight: 500; font-size: var(--rm-type-display-xl-size); line-height: var(--rm-type-display-xl-lh); letter-spacing: var(--rm-type-display-xl-ls); }
.rm-display-l  { font-family: var(--rm-font-display); font-weight: 500; font-size: var(--rm-type-display-l-size);  line-height: var(--rm-type-display-l-lh);  letter-spacing: var(--rm-type-display-l-ls); }
.rm-display-m  { font-family: var(--rm-font-display); font-weight: 500; font-size: var(--rm-type-display-m-size);  line-height: var(--rm-type-display-m-lh);  letter-spacing: var(--rm-type-display-m-ls); }
.rm-h1         { font-family: var(--rm-font-display); font-weight: 600; font-size: var(--rm-type-h1-size); line-height: var(--rm-type-h1-lh); letter-spacing: var(--rm-type-h1-ls); }
.rm-h2         { font-family: var(--rm-font-display); font-weight: 600; font-size: var(--rm-type-h2-size); line-height: var(--rm-type-h2-lh); letter-spacing: var(--rm-type-h2-ls); }
.rm-h3         { font-family: var(--rm-font-display); font-weight: 600; font-size: var(--rm-type-h3-size); line-height: var(--rm-type-h3-lh); letter-spacing: var(--rm-type-h3-ls); }
.rm-lead       { font-family: var(--rm-font-body);    font-weight: 400; font-size: var(--rm-type-lead-size); line-height: var(--rm-type-lead-lh); }
.rm-body       { font-family: var(--rm-font-body);    font-weight: 400; font-size: var(--rm-type-body-size); line-height: var(--rm-type-body-lh); }
.rm-body-s     { font-family: var(--rm-font-body);    font-weight: 400; font-size: var(--rm-type-body-s-size); line-height: var(--rm-type-body-s-lh); }
.rm-caption    { font-family: var(--rm-font-body);    font-weight: 400; font-size: var(--rm-type-caption-size); line-height: var(--rm-type-caption-lh); }
.rm-mono-m     { font-family: var(--rm-font-mono);    font-weight: 500; font-size: var(--rm-type-mono-m-size); line-height: var(--rm-type-mono-m-lh); letter-spacing: var(--rm-type-mono-m-ls); }
.rm-mono-s     { font-family: var(--rm-font-mono);    font-weight: 500; font-size: var(--rm-type-mono-s-size); line-height: var(--rm-type-mono-s-lh); letter-spacing: var(--rm-type-mono-s-ls); text-transform: uppercase; }
.rm-mono-xs    { font-family: var(--rm-font-mono);    font-weight: 500; font-size: var(--rm-type-mono-xs-size); line-height: var(--rm-type-mono-xs-lh); letter-spacing: var(--rm-type-mono-xs-ls); text-transform: uppercase; }

.rm-accent     { color: var(--rm-color-accent); }
.rm-italic     { font-style: italic; }