/* tokens.css — fm5.de-Cloud Design-Tokens (schlanker Slice-Subset).
 *
 * Übernommen aus arbeitsblatt-studio
 * v2-arbeitsblatt-studio/docs/corporate-design/fm5de-cloud-corporate-design.md
 * bzw. src/styles/tokens.css (kanonisch). Nur das für den Vertical-Slice
 * Benötigte: Farben, Typografie, Abstände, Radius, Schatten, Dark-Mode, Density.
 * Enthält AUSSCHLIESSLICH :root + Selektor-Varianten — keine Layout-/Komponenten-Regeln.
 *
 * Fonts: für den lokalen Slice system-ui-Stack (Inter/JetBrains-Mono-woff2 werden
 * in der Deploy-Phase same-origin nachgereicht — TODO, kein CDN).
 */

:root {
  /* Brand / Accent */
  --color-brand-500: #2B5BD7;
  --color-brand-600: #2147a8;
  --color-brand-300: #7da0e8;
  --color-accent:        var(--color-brand-500);
  --color-accent-hover:  var(--color-brand-600);

  /* Oberflächen (Hintergrundcreme-Familie) — „heller nach oben" */
  --color-bg-primary:    #F5F1E8;
  --color-bg-secondary:  #FBF8F0;
  --color-bg-tertiary:   #FFFFFF;
  --color-bg-sunken:     #EDE7D9;
  --color-bg-ink:        #1A1814;

  /* Text */
  --color-fg-primary:    #1C1A15;
  --color-fg-secondary:  #5E584B;
  --color-fg-tertiary:   #706A5A;
  --color-fg-on-accent:  #FFFFFF;

  /* Borders */
  --color-border-subtle: rgba(28, 26, 21, 0.10);
  --color-border-strong: rgba(28, 26, 21, 0.18);

  /* Status */
  --color-status-success: #2e8b57;
  --color-status-warning: #c98a1e;
  --color-status-danger:  #c0392b;

  /* Typografie */
  --font-family-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-size-200: 12px;
  --font-size-300: 13px;
  --font-size-400: 15px;
  --font-size-500: 17px;
  --font-size-600: 24px;
  --font-size-700: 32px;
  --font-size-800: 48px;
  --font-size-900: 72px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-1: 0 2px 6px rgba(26, 24, 20, 0.06), 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-2: 0 8px 20px rgba(26, 24, 20, 0.08), 0 2px 6px rgba(26, 24, 20, 0.05);
  --shadow-3: 0 24px 48px rgba(26, 24, 20, 0.10), 0 4px 12px rgba(26, 24, 20, 0.06);

  /* Abstände (Density-skaliert) */
  --space-scale: 1;
  --space-1: calc(4px  * var(--space-scale));
  --space-2: calc(8px  * var(--space-scale));
  --space-3: calc(12px * var(--space-scale));
  --space-4: calc(16px * var(--space-scale));
  --space-5: calc(20px * var(--space-scale));
  --space-6: calc(24px * var(--space-scale));
  --space-7: calc(32px * var(--space-scale));
  --space-8: calc(40px * var(--space-scale));
  --space-10: calc(64px * var(--space-scale));
}

/* Dark-Mode — Oberflächen/Text/Border umgekehrt. */
[data-theme='dark'] {
  --color-bg-primary:    #141310;
  --color-bg-secondary:  #1D1B16;
  --color-bg-tertiary:   #26231C;
  --color-bg-sunken:     #0F0E0B;

  --color-fg-primary:    #F1ECDF;
  --color-fg-secondary:  #B5AE9C;
  --color-fg-tertiary:   #8E8672;

  --color-border-subtle: rgba(241, 236, 223, 0.10);
  --color-border-strong: rgba(241, 236, 223, 0.18);

  --color-status-success: #5fcf8e;
  --color-status-warning: #e8b85a;
  --color-status-danger:  #e87a6a;

  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 8px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 24px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Dichte-Varianten (Beamer-Lesbarkeit). */
[data-density='compact'] { --space-scale: 0.75; }
[data-density='cozy']    { --space-scale: 1; }
[data-density='roomy']   { --space-scale: 1.25; }