/*
 * MBC Marketing — Design-Tokens (Sodium)
 * Quelle: src/styles/_sodium-tokens.scss (App). Werte 1:1 übernommen, damit die
 * Marketing-Seite exakt die Designsprache der App spricht. Ergänzt um
 * --on-accent (Textfarbe auf Akzent-Fläche) und zwei Marketing-Layout-Maße.
 *
 * Steuerung: <html data-theme="light|dark" data-accent="sodium|cyan|acid|plasma|amber|custom">
 * Bei data-accent="custom" setzt js/app.js die --accent*-Variablen inline.
 */

/* ---------- Schriften: IBM Plex, selbst gehostet (typography.md) ---------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2');
}

/* ---------- Light (Default) ---------- */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* Akzent — Sodium Orange */
  --accent: #ff6a00;
  --accent-hover: #ff8a30;
  --accent-active: #cc5500;
  --accent-dim: rgba(255, 106, 0, 0.12);
  --on-accent: #000000;

  /* Hintergrund */
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --bg-raised: #fafafa;
  --bg-chrome: #0b0b0b;
  --bg-chrome-alt: #1a1a1a;
  --bg-card: #ffffff;

  /* Vordergrund */
  --fg: #000000;
  --fg-2: #1a1a1a;
  --fg-3: #5e5e5e;
  --fg-4: #767676;
  --fg-5: #a7a7a7;
  --fg-on-dark: #ffffff;

  /* Borders */
  --border: #e6e6e6;
  --border-2: #d4d4d4;
  --border-strong: #5e5e5e;

  /* Status */
  --status-online: #3f8500;
  --status-online-bg: #ecf7d8;
  --status-offline: #898989;
  --status-offline-bg: #ededed;
  --status-warn: #df6500;
  --status-warn-bg: #fff1d6;
  --status-error: #e52020;
  --status-error-bg: #ffe0e0;
  --status-info: #0046a4;
  --status-info-bg: #e0ecff;

  /* Geometrie */
  --radius: 2px;
  --radius-pill: 999px;

  /* Typografie */
  --font-ui: 'IBM Plex Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Spacing-Skala (7 Stufen) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Layout */
  --topnav-height: 56px;
  --page-max: 1440px;
  --page-pad-x: 32px;

  /* Marketing-spezifisch: Lesebreite der Sektionen + Sektions-Abstand */
  --content-max: 1200px;
  --section-pad: 96px;
}

@media (max-width: 768px) {
  :root,
  [data-theme='light'],
  [data-theme='dark'] {
    --page-pad-x: 20px;
    --section-pad: 64px;
  }
}

@media (max-width: 480px) {
  :root,
  [data-theme='light'],
  [data-theme='dark'] {
    --page-pad-x: 16px;
    --section-pad: 56px;
  }
}

/* ---------- Akzent-Varianten (wie App) ---------- */
[data-accent='cyan'] {
  --accent: #00b8d4;
  --accent-hover: #33ccdd;
  --accent-active: #008fa3;
  --accent-dim: rgba(0, 184, 212, 0.12);
  --on-accent: #000000;
}
[data-accent='acid'] {
  --accent: #76b900;
  --accent-hover: #92d11a;
  --accent-active: #5e9400;
  --accent-dim: rgba(118, 185, 0, 0.12);
  --on-accent: #000000;
}
[data-accent='plasma'] {
  --accent: #d500f9;
  --accent-hover: #e633ff;
  --accent-active: #a300c2;
  --accent-dim: rgba(213, 0, 249, 0.12);
  --on-accent: #000000;
}
[data-accent='amber'] {
  --accent: #ffb300;
  --accent-hover: #ffc233;
  --accent-active: #cc8f00;
  --accent-dim: rgba(255, 179, 0, 0.12);
  --on-accent: #000000;
}

/* ---------- Dark ---------- */
[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0b0b0b;
  --bg-alt: #141414;
  --bg-raised: #1a1a1a;
  --bg-card: #141414;
  --fg: #ffffff;
  --fg-2: #f5f5f5;
  --fg-3: #a7a7a7;
  --fg-4: #898989;
  --fg-5: #757575;
  --border: #262626;
  --border-2: #333333;
  --border-strong: #5e5e5e;

  --status-online: #5cb324;
  --accent-active: #e66a1a;
  --status-info: #78a9ff;

  --status-online-bg: rgba(63, 133, 0, 0.18);
  --status-offline-bg: rgba(167, 167, 167, 0.12);
  --status-warn-bg: rgba(223, 101, 0, 0.18);
  --status-error-bg: rgba(229, 32, 32, 0.18);
  --status-info-bg: rgba(0, 70, 164, 0.22);
}

/* Dark + Akzent: aktive Töne müssen auf dunklen Flächen hell genug bleiben */
[data-theme='dark'][data-accent='cyan'] { --accent-active: #26c6da; }
[data-theme='dark'][data-accent='acid'] { --accent-active: #8bc34a; }
[data-theme='dark'][data-accent='plasma'] { --accent-active: #e040fb; }
[data-theme='dark'][data-accent='amber'] { --accent-active: #ffca28; }