/* =====================================================================
   Black Bridge Roleplay – Design-Tokens v1.1 (Spieljahr 1875)
   Einzige Quelle für Farben, Schriften, Abstände. Keine Hex-Werte in
   Ressourcen hart codieren, immer var(--bb-…) benutzen.
   Themen:  dunkel (Standard, Werkzeuge/Admin/HUD)
            papier  (Spieler-Dokumente, Ladebildschirm-Karten, Zeitung)
            -> <div data-bb-theme="papier"> schaltet einen Bereich um.
   ===================================================================== */

:root {
  /* ---------- Grundpalette (aus dem Logo abgeleitet) ---------- */
  --bb-kohle-950: #141516;
  --bb-kohle-900: #1B1C1E;
  --bb-kohle-800: #252628;   /* Logo-Hintergrund */
  --bb-kohle-700: #2F3033;
  --bb-kohle-600: #3B3C3F;
  --bb-kohle-500: #4B4B4E;

  --bb-messing-200: #E6D3A8;
  --bb-messing-300: #D7BD87;
  --bb-messing-400: #C4A46A;
  --bb-messing-500: #B39056;   /* Logo-Ringe */
  --bb-messing-600: #8F7142;
  --bb-messing-700: #6B5C49;   /* Logo-Schraffur */

  --bb-creme-50:  #FAF2E1;
  --bb-creme-100: #F3E4C3;     /* Logo-Schrift */
  --bb-creme-200: #E7D5AE;
  --bb-creme-300: #CEBE9E;
  --bb-creme-400: #B3A381;

  --bb-rost-300: #D07A5C;
  --bb-rost-400: #B65A3D;
  --bb-rost-500: #90412C;      /* Logo-Sonnenuntergang */
  --bb-rost-700: #5E2A1C;

  --bb-tinte: #2B1D12;         /* Eisengallus-Tinte, Text auf Papier */

  /* ---------- Schriften (Stil um 1875) ---------- */
  --bb-font-display: "Rye", "Old Standard TT", Georgia, serif;           /* Holzletter-Plakatschrift: Titel, Steckbriefe */
  --bb-font-heading: "Old Standard TT", Georgia, serif;                  /* Überschriften, Fließtext auf Papier */
  --bb-font-label:   "IM Fell English SC", "Old Standard TT", serif;     /* Kapitälchen: Buttons, Tabs, Labels */
  --bb-font-body:    "Old Standard TT", Georgia, serif;                  /* UI-Text, Tabellen */
  --bb-font-script:  "Pinyon Script", "Old Standard TT", cursive;       /* Unterschriften, Widmungen */
  --bb-font-mono:    Consolas, "Courier New", monospace;                 /* Konsole, Koordinaten, IDs */

  /* Größenskala (1920x1080 als Referenz; NUI skaliert nicht automatisch) */
  --bb-text-xs: 12px;
  --bb-text-sm: 14px;
  --bb-text-md: 16px;   /* Standard */
  --bb-text-lg: 19px;
  --bb-text-xl: 24px;
  --bb-text-2xl: 32px;
  --bb-text-3xl: 44px;
  --bb-text-4xl: 64px;  /* Ladebildschirm-Titel */

  --bb-leading-tight: 1.15;
  --bb-leading-normal: 1.5;
  --bb-tracking-caps: 0.06em; /* Kapitälchen in Labels/Buttons */

  /* ---------- Abstände (4er-Raster) ---------- */
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  --bb-space-7: 48px;
  --bb-space-8: 64px;

  /* ---------- Form ---------- */
  --bb-radius-sm: 2px;   /* Buttons, Inputs: fast eckig, wie gedruckt */
  --bb-radius-md: 4px;   /* Panels */
  --bb-radius-pill: 999px; /* nur Badges */
  --bb-border-w: 1px;

  --bb-shadow-1: 0 2px 6px rgba(0, 0, 0, .35);
  --bb-shadow-2: 0 10px 30px rgba(0, 0, 0, .55);
  --bb-inset-ring: inset 0 0 0 1px rgba(196, 164, 106, .18); /* innere Messinglinie */

  /* ---------- Bewegung ---------- */
  --bb-ease: cubic-bezier(.2, .7, .2, 1);
  --bb-dur-fast: 120ms;
  --bb-dur: 200ms;
  --bb-dur-slow: 400ms;

  /* ---------- Ebenen ---------- */
  --bb-z-hud: 10;
  --bb-z-panel: 100;
  --bb-z-modal: 200;
  --bb-z-toast: 300;

  /* ========== Semantische Tokens: Thema DUNKEL (Standard) ========== */
  --bb-bg:            var(--bb-kohle-900);
  --bb-surface:       var(--bb-kohle-800);
  --bb-surface-2:     var(--bb-kohle-700);
  --bb-surface-hover: var(--bb-kohle-600);
  --bb-overlay:       rgba(12, 12, 13, .72);

  --bb-border:        #4A4438;
  --bb-border-strong: var(--bb-messing-600);
  --bb-focus:         var(--bb-messing-300);

  --bb-text:          var(--bb-creme-100);
  --bb-text-muted:    var(--bb-creme-400);
  --bb-text-faint:    #8A8170;   /* nur Platzhalter/Deko, nie Pflichtinfo */
  --bb-heading:       var(--bb-creme-50);

  --bb-accent:        var(--bb-messing-500);
  --bb-accent-hover:  var(--bb-messing-400);
  --bb-accent-text:   var(--bb-kohle-950);   /* Text auf Messing */
  --bb-accent-soft:   rgba(179, 144, 86, .14);

  --bb-highlight:     var(--bb-rost-400);    /* Akzent 2, sparsam */

  --bb-success:       #8FAE68;
  --bb-warning:       #E0AE4C;
  --bb-danger:        #E2785B;
  --bb-info:          #8EADC0;
  --bb-success-soft:  rgba(143, 174, 104, .14);
  --bb-warning-soft:  rgba(224, 174, 76, .14);
  --bb-danger-soft:   rgba(226, 120, 91, .14);
  --bb-info-soft:     rgba(142, 173, 192, .14);
  --bb-danger-fill:   var(--bb-rost-500);    /* Hintergrund gefährlicher Buttons */
}

/* ========== Thema PAPIER ========== */
[data-bb-theme="papier"] {
  /* gealtertes Papier um 1875: Tabak- und Umbratöne, Eisengallus-Tinte */
  --bb-bg:            #DCC29E;
  --bb-surface:       #E4CCA6;
  --bb-surface-2:     #D2B48A;
  --bb-surface-hover: #CBA97C;
  --bb-overlay:       rgba(43, 29, 18, .55);

  --bb-border:        #9C7B52;
  --bb-border-strong: #3A2716;
  --bb-focus:         var(--bb-rost-500);

  --bb-text:          var(--bb-tinte);
  --bb-text-muted:    #4E3A26;
  --bb-text-faint:    #7E6446;
  --bb-heading:       #1F140A;

  --bb-accent:        var(--bb-tinte);
  --bb-accent-hover:  #4A3422;
  --bb-accent-text:   #F1E2C4;
  --bb-accent-soft:   rgba(43, 29, 18, .10);

  --bb-highlight:     #7A2A18;

  --bb-success:       #33491D;
  --bb-warning:       #5E3C06;
  --bb-danger:        #7A2A18;
  --bb-info:          #263F50;
  --bb-success-soft:  rgba(51, 73, 29, .12);
  --bb-warning-soft:  rgba(94, 60, 6, .12);
  --bb-danger-soft:   rgba(122, 42, 24, .10);
  --bb-info-soft:     rgba(38, 63, 80, .10);
  --bb-danger-fill:   var(--bb-rost-500);
}