/* ═══════════════════════════════════════════
   Design Tokens — Notes PWA v2
   CD-Rollout (WD-Apps Design System): CD-Tokens (--anth-x, --brand-x,
   --accent-x + semantische Aliase + Status-Tripel) sind die Single
   Source of Truth. Die bestehenden --c-* bleiben als ALIASE darauf
   (Alias-Layer, Entscheidung D1) — so funktionieren alle 513 var(--c-…)-
   Stellen sofort weiter, ohne sie anzufassen.

   Theme (D3): :root = Light (SSOT), [data-theme="dark"] = Dark. Die --c-*
   zeigen auf SEMANTISCHE Tokens (--text, --bg-x, --primary …), die im
   Dark-Block umgemappt werden → die --c-* kippen automatisch mit.
   ═══════════════════════════════════════════ */

:root {
  /* ── Anthrazit-Rampe · neutrale SSOT (KEIN Blaustich) ── */
  --anth-50:  #f7f7f6;
  --anth-100: #ededeb;
  --anth-200: #dcdcd9;
  --anth-300: #c2c2be;
  --anth-400: #9a9a95;
  --anth-500: #6f6f6a;
  --anth-600: #54544f;
  --anth-700: #3b3b38;
  --anth-800: #2a2a28;
  --anth-900: #1b1b19;

  /* ── Brand · gedämpftes Petrol (Anker #007C7C) ── */
  --brand-50:  #eef5f4;
  --brand-100: #d6e8e6;
  --brand-200: #aed4d0;
  --brand-300: #7db9b4;
  --brand-400: #4d9892;
  --brand-500: #2f7d78;
  --brand-600: #1d6663;  /* Primäraktion */
  --brand-700: #155351;  /* Hover / Active / Header-Akzent */
  --brand-800: #114443;
  --brand-900: #0d3534;

  /* ── slate-* Aliase auf anth-* (Abwärtskompat. zu CD-Prototypen) ── */
  --slate-50:  var(--anth-50);
  --slate-100: var(--anth-100);
  --slate-200: var(--anth-200);
  --slate-300: var(--anth-300);
  --slate-400: var(--anth-400);
  --slate-500: var(--anth-500);
  --slate-600: var(--anth-600);
  --slate-700: var(--anth-700);
  --slate-800: var(--anth-800);
  --slate-900: var(--anth-900);

  /* ── Warm-Akzent (Ocker) — sehr sparsam ── */
  --accent-50:  #faf4e9;
  --accent-100: #f3e6cb;
  --accent-200: #e8cf9d;
  --accent-500: #bd8b3f;
  --accent-600: #9d7030;
  --accent-700: #7c5826;

  /* ── Semantische Aliase (Light) ── */
  --bg-app:        var(--slate-50);
  --bg-surface:    #ffffff;
  --bg-subtle:     var(--slate-100);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --text:          var(--slate-800);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-400);
  --primary:       var(--brand-600);
  --primary-hover: var(--brand-700);
  --ring:          var(--brand-500);
  --brand-text:    var(--brand-700);

  /* ── Status-Tripel (bg / text / border) · Light ── */
  --st-gray-bg:#f0f0ee;   --st-gray-tx:#54544f;   --st-gray-bd:#dcdcd9;
  --st-blue-bg:#eff6ff;   --st-blue-tx:#1d4ed8;   --st-blue-bd:#bfdbfe;
  --st-amber-bg:#fffbeb;  --st-amber-tx:#b45309;  --st-amber-bd:#fde68a;
  --st-teal-bg:#eef5f4;   --st-teal-tx:#155351;   --st-teal-bd:#aed4d0;
  --st-violet-bg:#f5f3ff; --st-violet-tx:#6d28d9; --st-violet-bd:#ddd6fe;
  --st-green-bg:#f0fdf4;  --st-green-tx:#15803d;  --st-green-bd:#bbf7d0;
  --st-red-bg:#fef2f2;    --st-red-tx:#b91c1c;    --st-red-bd:#fecaca;

  /* ════════════════════════════════════════
     LEGACY-ALIAS-LAYER: --c-* → CD-Tokens
     Zeigen auf SEMANTISCHE Tokens, damit sie im Dark-Theme mitkippen.
     Mapping aus dem Brief; raw-Rampe nur wo kein semantisches Token existiert.
     ════════════════════════════════════════ */

  /* Brand */
  --c-primary:       var(--primary);       /* #1d6663 */
  --c-primary-hover: var(--primary-hover); /* #155351 */
  --c-primary-soft:  var(--brand-50);      /* #eef5f4 — Dark-Override unten */
  --c-accent:        var(--accent-600);    /* Ocker, sehr sparsam */

  /* Semantik (Status-Text-Töne) */
  --c-success:      var(--st-green-tx);
  --c-success-soft: var(--st-green-bg);
  --c-warning:      var(--st-amber-tx);
  --c-warning-soft: var(--st-amber-bg);
  --c-error:        var(--st-red-tx);
  --c-error-soft:   var(--st-red-bg);
  --c-info:         var(--primary);        /* war Blau → Petrol (Chrome blaufrei) */

  /* Oberflächen — Border-first: Glass → solide Surface (Glass-Abbau in 1.4) */
  --c-bg:               var(--bg-app);
  --c-bg-elevated:      var(--bg-surface);
  --c-surface:          var(--bg-surface);
  --c-surface-solid:    var(--bg-surface);
  --c-surface-elevated: var(--bg-surface);
  --c-surface-hover:    var(--bg-subtle);
  --c-glass:            var(--bg-surface);
  --c-glass-heavy:      var(--bg-surface);
  --c-border:           var(--border);
  --c-border-subtle:    var(--border);

  /* Text */
  --c-text:           var(--text);
  --c-text-secondary: var(--text-muted);
  --c-text-muted:     var(--text-faint);
  --c-text-inverse:   #ffffff;

  /* ── Spacing (4px base) ── */
  --sp-2xs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* ── Typography ── */
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* ── Radius ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* ── Shadows · Border-first: dezent (Light-Default) ──
     Heavy Schatten nur bewusst schwebend (Bottom-Nav/FAB/Dialog/Frame) —
     siehe components.css (1.4). */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-fab: 0 6px 16px rgba(29, 102, 99, 0.36), 0 0 0 4px var(--bg-surface);

  /* ── Transitions ── */
  --tr-fast: 100ms ease-out;
  --tr-normal: 200ms ease-out;
  --tr-slow: 300ms ease-out;

  /* ── Layout ── */
  --header-h: 52px;
  --nav-h: 60px;
  --sidebar-w: 240px;
  --sidebar-w-narrow: 64px;
  --fab-size: 56px;
  --content-max: 1200px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ── Z-Index Scale ── */
  --z-base: 1;
  --z-header: 100;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── Status Colors (mapped) ── */
  --c-status-new: var(--c-primary);
  --c-status-inbox: var(--c-primary);
  --c-status-todo: var(--c-warning);
  --c-status-open: var(--c-warning);
  --c-status-in-progress: var(--c-info);
  --c-status-done: var(--c-success);
  --c-status-answered: var(--c-success);
  --c-status-error: var(--c-error);
  --c-status-archived: var(--c-text-muted);
  --c-status-sent: var(--st-teal-tx);   /* „versendet" → Teal/Petrol, NICHT Blau */
}

/* ════════════════════════════════════════════
   Dark Mode — Anthrazit (neutral, gestuft). Aktivierung via
   <html data-theme="dark"> (App-Toggle, Entscheidung D3).
   Nur semantische Aliase + Status-Tripel werden umgemappt — die --c-*
   zeigen darauf und kippen automatisch mit.
   ════════════════════════════════════════════ */
:root[data-theme="dark"],
[data-theme="dark"] {
  /* Gestufte Anthrazit-Flächen: app < surface < subtle */
  --bg-app:        #161614;
  --bg-surface:    var(--anth-800);   /* #2a2a28 */
  --bg-subtle:     #323230;
  --border:        #3a3a37;
  --border-strong: var(--anth-600);   /* #54544f */

  /* Text auf Anthrazit */
  --text:          #f3f3f1;
  --text-muted:    var(--anth-400);   /* #9a9a95 */
  --text-faint:    #76766f;

  /* Petrol hebt eine Stufe für Kontrast auf dunklem Grund */
  --primary:       var(--brand-400);  /* #4d9892 */
  --primary-hover: var(--brand-300);  /* #7db9b4 */
  --ring:          var(--brand-400);
  --brand-text:    var(--brand-300);

  /* --c-* die nicht über ein semantisches Token kippen: explizit setzen */
  --c-primary-soft: #13302e;          /* dunkles Petrol-Ground (vgl. --st-teal-bg dark) */

  /* Status-Töne fürs Dunkle neu balanciert (gedämpfte Gründe, helle Schrift) */
  --st-gray-bg:#2c2c2a;   --st-gray-tx:#c8c8c3;   --st-gray-bd:#403f3c;
  --st-blue-bg:#16263f;   --st-blue-tx:#9cc2f5;   --st-blue-bd:#2a3f5e;
  --st-amber-bg:#322611;  --st-amber-tx:#e9bf72;  --st-amber-bd:#4d3c1a;
  --st-teal-bg:#13302e;   --st-teal-tx:#7fbfb9;   --st-teal-bd:#27514d;
  --st-violet-bg:#241f3a; --st-violet-tx:#c0b1ef; --st-violet-bd:#3a3160;
  --st-green-bg:#13301d;  --st-green-tx:#83cf9b;  --st-green-bd:#27512f;
  --st-red-bg:#3a1717;    --st-red-tx:#f3a3a3;    --st-red-bd:#5e2a2a;
}