/* ===========================================
   THEME.CSS — myLangSite Theme Layer
   Letztes CSS in jeder HTML-Seite geladen.

   THEME WECHSELN:
     theme-init.js: var APP_THEME = 'navy';   (oder 'green')

   Dieses File definiert alle Bridge-Tokens fuer beide Themes.
   Alle Komponenten nutzen nur noch var(--color-primary) etc.,
   nie direkte Hex-Werte.

   R5 (2026-06-03, WP-1): Hex-Werte durch var-Chain auf
   premium-design-tokens.css ersetzt (DRY). Keine resolvenden
   Wert-Aenderungen — nur Single-Source statt Duplikat.
   =========================================== */

/* ===================================
   NAVY THEME (Default)
   Premium Blue-First Design
   Primaerfarbe: --color-400 (#5b87cc, "Accent")
   =================================== */
:root,
:root[data-theme="navy"] {
    /* Primaere Aktionsfarbe */
    --color-primary:          var(--color-400);   /* #5b87cc */
    --color-primary-dark:     var(--color-500);   /* #2a5fa8 */
    --color-primary-active:   var(--color-600);   /* #1a3e73 */

    /* Akzent (identisch mit Primary im Navy-Theme) */
    --accent:                 var(--color-400);
    --accent-hover:           var(--color-500);
    --accent-active:          var(--color-600);

    /* Hintergrundefarben */
    --bg-base:                var(--neutral-50);   /* #f8f9fa */
    --bg-surface:             var(--neutral-0);    /* #ffffff */
    --bg-subtle:              var(--neutral-100);  /* #f1f3f5 */
    --color-bg-primary:       var(--neutral-0);
    --color-bg-secondary:     var(--neutral-50);
    --color-bg-hover:         var(--neutral-100);

    /* Textfarben */
    --text-primary:           var(--color-900);    /* #060f1c */
    --text-secondary:         var(--neutral-700);  /* #495057 */
    --text-muted:             var(--neutral-500);  /* #adb5bd */
    --text-disabled:          var(--neutral-400);  /* #ced4da */
    --color-text-primary:     var(--color-900);
    --color-text-secondary:   var(--neutral-700);

    /* Rahmenfarben */
    --border-default:         var(--neutral-200);  /* #e9ecef */
    --border-subtle:          var(--neutral-100);  /* #f1f3f5 */
    --border-strong:          var(--neutral-300);  /* #dee2e6 */
    --color-border:           var(--neutral-200);

    /* Status (alias auf B4 Status-Tokens aus premium-design-tokens) */
    --color-success:          var(--success);          /* #047857 */
    --color-error:            var(--danger-text);      /* #b91c1c */
    --color-error-dark:       #7f1d1d;                 /* kein B4-Token, bleibt hex */
    --color-warning:          #b45309;                 /* kein B4-Token, bleibt hex */
    --color-info:             var(--info-text);        /* #1d4ed8 */

}

/* ===================================
   GREEN THEME (Legacy)
   Bootstrap/Material Gruen-Primaer
   Primaerfarbe: --color-green-primary (#04AA6D)
   =================================== */
:root[data-theme="green"] {
    /* Primaere Aktionsfarbe
       WP5 [6/8]: Legacy Part-A-Tokens inlined (--color-green-* existieren nicht mehr) */
    --color-primary:          #04AA6D;
    --color-primary-dark:     #038855;
    --color-primary-active:   #155724;

    /* Akzent */
    --accent:                 #04AA6D;
    --accent-hover:           #038855;
    --accent-active:          #155724;

    /* Hintergrundefarben */
    --bg-base:                var(--neutral-50);   /* #f8f9fa — WP5: --color-milk → --neutral-50 */
    --bg-surface:             var(--neutral-0);    /* #ffffff */
    --bg-subtle:              #e5e5e5;
    --color-bg-primary:       var(--neutral-0);
    --color-bg-secondary:     var(--neutral-50);   /* WP5: --color-milk → --neutral-50 */
    --color-bg-hover:         #e5e5e5;

    /* Textfarben */
    --text-primary:           #000000;
    --text-secondary:         #6b7280;
    --text-muted:             #9e9e9e;
    --text-disabled:          #b0b0b0;
    --color-text-primary:     #000000;
    --color-text-secondary:   #6b7280;

    /* Rahmenfarben */
    --border-default:         #d1d1d1;
    --border-subtle:          #e5e5e5;
    --border-strong:          var(--color-900);    /* WP5: --color-magnetic-gray → --color-900 */
    --color-border:           #d1d1d1;

    /* Status
       WP5 [6/8]: Legacy Part-A-Tokens durch B3-Tokens ersetzt */
    --color-success:          #28a745;             /* WP5: --color-green-success inlined */
    --color-error:            var(--danger-text);  /* WP5: --color-red-danger → --danger-text */
    --color-error-dark:       var(--danger-text);  /* WP5: --color-red-darker → --danger-text */
    --color-warning:          #ffc107;             /* WP5: --color-yellow-warning inlined */
    --color-info:             #2196f3;             /* WP5: --color-blue-primary inlined */

    /* WP5 [8/8]: --gray-* Shims entfernt. Kein Component nutzt mehr var(--gray-*).
       Bei Bedarf → var(--neutral-*) verwenden. */
}

/* ===================================
   DARK MODE — Theme Overrides
   Muss NACH den Light-Mode :root-Blöcken stehen,
   da theme.css als letztes CSS geladen wird und
   sonst premium-design-tokens.css Dark-Mode überschreibt.
   =================================== */
@media (prefers-color-scheme: dark) {
    :root,
    :root[data-theme="navy"] {
        /* Hintergrundefarben */
        --bg-base:    #0a0e1a;   /* Seiten-Hintergrund dunkel */
        --bg-surface: #111827;   /* Karten, Modals, Navbar dunkel */
        --bg-subtle:  #1f2937;   /* Hover, Inputs dunkel */

        /* Textfarben — theme.css Light-Block überschreibt premium-design-tokens.css
           Dark-Mode (gleiche Spezifität, last-loaded gewinnt) → hier zurücksetzen */
        --text-primary:   #f9fafb;
        --text-secondary: #d1d5db;
        --text-muted:     #9ca3af;
        --text-disabled:  #6b7280;

        /* Rahmenfarben */
        --border-default: #1f2937;
        --border-subtle:  #111827;
        --border-strong:  #374151;

        /* Alias-Tokens (spiegeln die obigen Werte) */
        --color-text-primary:   #f9fafb;
        --color-text-secondary: #d1d5db;
        --color-bg-primary:     #111827;
        --color-bg-secondary:   #1f2937;
        --color-bg-hover:       #1f2937;
        --color-border:         #1f2937;

        /* Akzent im Dark-Mode bleibt gleich (Blau bleibt sichtbar) */
        /* --color-primary: var(--color-400) — unverändert */
    }
}