/*
 * mitarbeiterglück Design Tokens
 * -----------------------------------------------------------------------------
 * Zentrale Farbwerte und Basiswerte der Marke mitarbeiterglück.
 * Einbindung: als erste CSS-Datei des Projekts laden (nach den @font-face-Dateien),
 * sodass alle nachfolgenden Styles auf die Custom Properties zugreifen können.
 *
 * Schriften:
 *   --font-logo  → Metropolis Regular 400 (Wortmarke / Logo-Text)
 *   --font-sans  → InterVariable / Inter (alle UI-Texte)
 *
 * Struktur:
 *   1) Rohe Markenwerte (unveränderlich) — als --brand-* Token
 *   2) Semantische Tokens (werden genutzt) — als --color-*, --bg-*, etc.
 *   3) Dark Mode via prefers-color-scheme (automatisch)
 *   4) Manueller Override via [data-theme="dark"] oder [data-theme="light"]
 *   5) Basis-Reset und Grund-Styles
 *   6) Logo-Klassen
 *
 * Kontrastwerte (WCAG):
 *   - Ink auf Paper:          12.93:1  (AAA)
 *   - Paper auf Dark:         14.91:1  (AAA)
 *   - Teal-Accent Light:       5.10:1  (AA normal)
 *   - Teal-Accent Dark:        8.79:1  (AAA)
 *
 * Spec: docs/superpowers/specs/2026-05-08-corporate-identity-design.md
 */

:root {
  /* =========================================================================
   * 1) ROHE MARKENWERTE
   * Nur für Referenz/Debug. Im Code immer die semantischen Tokens nutzen.
   * =========================================================================
   */

  --brand-ink:               #1c1a08;
  --brand-paper:             #f0eee6;
  --brand-dark-bg:           #14130f;
  --brand-teal-light:        #316C78;
  --brand-teal-dark:         #93BFCB;
  --brand-muted-light:       #a8a49a;
  --brand-muted-dark:        #55524b;

  /* =========================================================================
   * 2) SEMANTISCHE TOKENS (Light Mode als Default)
   * =========================================================================
   */

  --bg-primary:              var(--brand-paper);
  --bg-secondary:            #e8e5db;
  --bg-tertiary:             #dcd9ce;
  --bg-inverse:              var(--brand-dark-bg);

  --text-primary:            var(--brand-ink);
  --text-secondary:          #4a4638;
  --text-tertiary:           #6a6a5c;
  --text-muted:              #8a857a;
  --text-inverse:            var(--brand-paper);

  --border-subtle:           rgba(28, 26, 8, 0.08);
  --border-default:          rgba(28, 26, 8, 0.16);
  --border-emphasized:       rgba(28, 26, 8, 0.32);

  --accent:                  var(--brand-teal-light);
  --accent-hover:            #275864;
  --accent-active:           #1F4651;
  --accent-subtle:           rgba(49, 108, 120, 0.12);
  --accent-text:             var(--brand-paper);

  --logo-ink:                var(--brand-ink);

  --status-success:          #4A6B54;
  --status-warning:          #A0751C;
  --status-danger:           #A33A2E;
  --status-info:             #3D6B7D;

  --radius-sm:               4px;
  --radius-md:               8px;
  --radius-lg:               12px;
  --radius-xl:               20px;
  --radius-pill:             999px;

  --space-1:                 0.25rem;
  --space-2:                 0.5rem;
  --space-3:                 0.75rem;
  --space-4:                 1rem;
  --space-5:                 1.5rem;
  --space-6:                 2rem;
  --space-7:                 3rem;
  --space-8:                 4rem;

  --container-narrow:        640px;
  --container-default:       960px;
  --container-wide:          1200px;
  --container-fluid:         100%;

  --z-base:                  0;
  --z-dropdown:              100;
  --z-sticky:                200;
  --z-overlay:               300;
  --z-modal:                 400;
  --z-toast:                 500;
  --z-tooltip:               600;

  --font-logo:               'Metropolis', sans-serif;
  --font-sans:               'InterVariable', 'Inter',
                             -apple-system, BlinkMacSystemFont,
                             'Segoe UI', Roboto, sans-serif;
  --font-mono:               'JetBrains Mono', ui-monospace,
                             SFMono-Regular, Menlo, monospace;

  --bs-body-font-family:     var(--font-sans);
  --bs-primary:              var(--accent);
  --bs-primary-rgb:          49, 108, 120;
  --bs-body-bg:              var(--bg-primary);
  --bs-body-color:           var(--text-primary);
  --bs-link-color:           var(--accent);
  --bs-link-hover-color:     var(--accent-hover);
  --bs-border-color:         var(--border-default);
  --bs-border-radius:        var(--radius-md);
  --bs-border-radius-sm:     var(--radius-sm);
  --bs-border-radius-lg:     var(--radius-lg);
  --bs-box-shadow:           var(--shadow-sm);
  --bs-box-shadow-sm:        var(--shadow-xs);
  --bs-box-shadow-lg:        var(--shadow-md);

  --font-size-xs:            0.75rem;
  --font-size-sm:            0.875rem;
  --font-size-base:          1rem;
  --font-size-lg:            1.125rem;
  --font-size-xl:            1.375rem;
  --font-size-2xl:           1.75rem;
  --font-size-3xl:           2.25rem;
  --font-size-4xl:           3rem;

  --line-height-tight:       1.2;
  --line-height-normal:      1.5;
  --line-height-relaxed:     1.7;

  --letter-spacing-tight:    -0.02em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.08em;

  --shadow-xs:               0 1px 2px rgba(28, 26, 8, 0.04);
  --shadow-sm:               0 1px 3px rgba(28, 26, 8, 0.06);
  --shadow-md:               0 4px 12px rgba(28, 26, 8, 0.08);
  --shadow-lg:               0 8px 24px rgba(28, 26, 8, 0.10);

  --focus-ring:              0 0 0 3px rgba(49, 108, 120, 0.35);

  --transition-fast:         120ms ease;
  --transition-base:         180ms ease;
  --transition-slow:         240ms ease;
}

/* =============================================================================
 * 3) DARK MODE — automatisch per Media Query
 * =============================================================================
 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:            var(--brand-dark-bg);
    --bg-secondary:          #1f1e19;
    --bg-tertiary:           #2a2824;
    --bg-inverse:            var(--brand-paper);
    --bs-primary-rgb:        147, 191, 203;

    --text-primary:          var(--brand-paper);
    --text-secondary:        #c7c4b8;
    --text-tertiary:         #8a857a;
    --text-muted:            #6a6560;
    --text-inverse:          var(--brand-ink);

    --border-subtle:         rgba(240, 238, 230, 0.06);
    --border-default:        rgba(240, 238, 230, 0.14);
    --border-emphasized:     rgba(240, 238, 230, 0.28);

    --accent:                var(--brand-teal-dark);
    --accent-hover:          #B0D2DD;
    --accent-active:         #C6DFE6;
    --accent-subtle:         rgba(147, 191, 203, 0.14);
    --accent-text:           var(--brand-dark-bg);

    --logo-ink:              var(--brand-paper);

    --status-success:        #A4C7AA;
    --status-warning:        #D4A84A;
    --status-danger:         #D97766;
    --status-info:           #7DAEC0;

    --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:             0 8px 24px rgba(0, 0, 0, 0.6);

    --focus-ring:            0 0 0 3px rgba(147, 191, 203, 0.4);
  }
}

/* =============================================================================
 * 4) MANUELLER MODE-OVERRIDE
 * =============================================================================
 */
[data-theme="light"] {
  --bg-primary:              var(--brand-paper);
  --bg-secondary:            #e8e5db;
  --bg-tertiary:             #dcd9ce;
  --bg-inverse:              var(--brand-dark-bg);
  --bs-primary-rgb:          49, 108, 120;

  --text-primary:            var(--brand-ink);
  --text-secondary:          #4a4638;
  --text-tertiary:           #6a6a5c;
  --text-muted:              #8a857a;
  --text-inverse:            var(--brand-paper);

  --border-subtle:           rgba(28, 26, 8, 0.08);
  --border-default:          rgba(28, 26, 8, 0.16);
  --border-emphasized:       rgba(28, 26, 8, 0.32);

  --accent:                  var(--brand-teal-light);
  --accent-hover:            #275864;
  --accent-active:           #1F4651;
  --accent-subtle:           rgba(49, 108, 120, 0.12);
  --accent-text:             var(--brand-paper);

  --logo-ink:                var(--brand-ink);

  --status-success:          #4A6B54;
  --status-warning:          #A0751C;
  --status-danger:           #A33A2E;
  --status-info:             #3D6B7D;

  --focus-ring:              0 0 0 3px rgba(49, 108, 120, 0.35);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg-primary:              var(--brand-dark-bg);
  --bg-secondary:            #1f1e19;
  --bg-tertiary:             #2a2824;
  --bg-inverse:              var(--brand-paper);
  --bs-primary-rgb:          147, 191, 203;

  --text-primary:            var(--brand-paper);
  --text-secondary:          #c7c4b8;
  --text-tertiary:           #8a857a;
  --text-muted:              #6a6560;
  --text-inverse:            var(--brand-ink);

  --border-subtle:           rgba(240, 238, 230, 0.06);
  --border-default:          rgba(240, 238, 230, 0.14);
  --border-emphasized:       rgba(240, 238, 230, 0.28);

  --accent:                  var(--brand-teal-dark);
  --accent-hover:            #B0D2DD;
  --accent-active:           #C6DFE6;
  --accent-subtle:           rgba(147, 191, 203, 0.14);
  --accent-text:             var(--brand-dark-bg);

  --logo-ink:                var(--brand-paper);

  --status-success:          #A4C7AA;
  --status-warning:          #D4A84A;
  --status-danger:           #D97766;
  --status-info:             #7DAEC0;

  --focus-ring:              0 0 0 3px rgba(147, 191, 203, 0.4);

  color-scheme: dark;
}

/* =============================================================================
 * 5) BASIS-RESET
 * =============================================================================
 */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-base), color var(--transition-base);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* =============================================================================
 * 6) WORTMARKE
 * =============================================================================
 */

.mg-wordmark {
  font-family: var(--font-logo);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--logo-ink);
}