/*
 * Design-System · Phase 7 Aesthetic (Mai 2026)
 *
 * Prinzip: Farbe als Information, nicht als Dekoration.
 * Eine Akzentfarbe (#1D9E75). Status durch Punkt+Text, nicht farbige Pills.
 * Fast monochrom — warm stone statt kühles Slate.
 */

:root {
  /* ─── Backgrounds ───────────────────────────────────────────────── */
  --color-bg-primary:   #FFFFFF;           /* Cards, Panels */
  --color-bg-secondary: #F5F5F4;           /* Page-Background (warm stone) */
  --color-bg-tertiary:  #F0EFEB;           /* Sidebar / Activity (warm beige) */
  --color-bg-overlay:   rgba(0, 0, 0, 0.4);

  /* ─── Text ──────────────────────────────────────────────────────── */
  --color-text-primary:   #111111;         /* Fast-Schwarz — Headlines, Body */
  --color-text-secondary: #555550;         /* Warm-Grau — Labels, Subtitles */
  --color-text-tertiary:  #999993;         /* Sehr hell — Hints, Placeholder */
  --color-text-inverse:   #FFFFFF;

  /* ─── Borders ───────────────────────────────────────────────────── */
  --color-border-tertiary:  rgba(0, 0, 0, 0.08);   /* Sehr dezent — Default */
  --color-border-secondary: rgba(0, 0, 0, 0.13);   /* Etwas sichtbarer — Hover/Focus */
  --color-border-primary:   rgba(0, 0, 0, 0.20);   /* Aktiv/Eingabe */

  /* ─── Brand (2B Norell #1D9E75) — einzige Akzentfarbe ───────────── */
  --color-brand-50:  #F0FAF6;
  --color-brand-100: #D1FAE5;
  --color-brand-200: #A7F3D0;
  --color-brand-400: #1D9E75;
  --color-brand-500: #1D9E75;
  --color-brand-600: #0F7A5A;
  --color-brand-700: #0B5E45;
  --color-brand-800: #08442F;

  /* ─── Status (nur Marker-Farben — kein bunter Hintergrund) ─────── */
  /* Marker = kleiner Dot, Text bleibt in --color-text-secondary      */
  --color-success-bg:     #F2FBF6;         /* Sehr subtil */
  --color-success-text:   #1A5C38;
  --color-success-marker: #22C55E;

  --color-warning-bg:     #FDF9F0;
  --color-warning-text:   #8A4700;
  --color-warning-marker: #D97706;

  --color-danger-bg:      #FDF2F2;
  --color-danger-text:    #8B1A1A;
  --color-danger-marker:  #CC3333;

  --color-info-bg:        #F5F5F4;         /* Neutral statt blau */
  --color-info-text:      #444440;
  --color-info-marker:    #888880;

  /* ─── Kein Indigo/Lila mehr ─────────────────────────────────────── */
  --color-accent-bg:     #F5F5F4;
  --color-accent-text:   #333330;
  --color-accent-marker: #666660;

  /* ─── Typography ────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --font-size-xs:   10.5px;
  --font-size-sm:   12px;
  --font-size-base: 13px;                 /* Body */
  --font-size-md:   14px;
  --font-size-lg:   15px;
  --font-size-xl:   18px;                 /* h2 */
  --font-size-2xl:  22px;                 /* h1 */

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

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  /* ─── Spacing ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── Border-Radius ─────────────────────────────────────────────── */
  --radius-sm:  4px;                      /* Badges, Micro-Pillen */
  --radius-md:  8px;                      /* Buttons, Inputs, Nav-Items */
  --radius-lg:  10px;                     /* Toolbars, Dropdowns */
  --radius-xl:  12px;                     /* Cards */
  --radius-2xl: 16px;                     /* Modals, große Container */

  /* ─── Layout-Konstanten ────────────────────────────────────────── */
  --sidebar-width-expanded:  220px;
  --sidebar-width-collapsed: 56px;
  --activity-width-expanded: 240px;
  --activity-width-collapsed: 36px;
  --header-height: 48px;

  /* ─── Page-Layout-Tokens (Single Source of Truth) ──────────────
   * Linear/Stripe/Vercel-Pattern: EINE Quelle für Page-Breite + -Padding.
   * Fluid via clamp() — kein magisches max-w-2xl/lg/sm Chaos mehr.
   * Anwendung über .page-shell (Default) oder .page-shell--narrow.
   * ─────────────────────────────────────────────────────────────── */
  --page-max:        1320px;                    /* Standard-Canvas (Listen, Detail, Dashboard) */
  --page-max-wide:   1600px;                    /* Disposition, Reports — viel Tabellen-Raum */
  --page-max-narrow:  860px;                    /* Settings, Profil, Formulare */
  --page-max-text:    680px;                    /* Reine Lese-Inhalte (Anleitungen, Texte) */
  --page-px:         clamp(16px, 3vw, 32px);    /* fluid: 16px Handy → 32px Desktop */
  --page-py:         clamp(12px, 2vw, 24px);    /* fluid: 12px Handy → 24px Desktop */

  /* ─── Fluid Typography (clamp = min, ideal, max) ────────────────
   * Body bleibt bei 13px (App-Density). Headings skalieren leicht.
   * ─────────────────────────────────────────────────────────────── */
  --fs-display:  clamp(20px, 2.2vw + 8px, 26px); /* Page-Headlines */
  --fs-h1:       clamp(16px, 1.4vw + 8px, 19px); /* Section-Header (.sh-title) */
  --fs-h2:       clamp(13px, 0.6vw + 9px, 15px); /* Card-Titel */
  --fs-body:     13px;                            /* fix — Density */
  --fs-meta:     clamp(11px, 0.3vw + 9px, 12px); /* Labels */
  --fs-mini:     10px;                            /* Uppercase-Labels */

  /* ─── Schatten ─────────────────────────────────────────────────── */
  --shadow-none:  none;
  --shadow-card:  0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 2px 8px rgba(15, 23, 42, 0.06), 0 16px 48px -16px rgba(15, 23, 42, 0.18);
  --shadow-focus: 0 0 0 3px rgba(29, 158, 117, 0.2);
}

/* ─── Dark Mode ──────────────────────────────────────────────────────
 * Steuerung:
 *   kein data-theme        → System-Präferenz (media query unten)
 *   data-theme="light"     → erzwungen Light (Default-Variablen oben)
 *   data-theme="dark"      → erzwungen Dark
 * Specificity sorgt für korrekte Override-Reihenfolge.
 * --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg-primary: #1A1A18;
    --color-bg-secondary: #131311;
    --color-bg-tertiary: #0E0E0C;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);

    --color-text-primary: #F5F5F0;
    --color-text-secondary: #B4B2A9;
    --color-text-tertiary: #888780;
    --color-text-inverse: #0F0F0E;

    --color-border-tertiary: rgba(255, 255, 255, 0.08);
    --color-border-secondary: rgba(255, 255, 255, 0.15);
    --color-border-primary: rgba(255, 255, 255, 0.25);

    --color-brand-50: #04342C;
    --color-brand-100: #085041;
    --color-brand-400: #5DCAA5;
    --color-brand-600: #9FE1CB;
    --color-brand-800: #E1F5EE;

    --color-success-bg: #085041;
    --color-success-text: #9FE1CB;
    --color-warning-bg: #633806;
    --color-warning-text: #FAC775;
    --color-danger-bg: #791F1F;
    --color-danger-text: #F09595;
    --color-info-bg: #0C447C;
    --color-info-text: #B5D4F4;
    --color-accent-bg: #3C3489;
    --color-accent-text: #CECBF6;

    --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
    --shadow-modal: 0 0 0 0.5px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* Manueller Dark-Override (User-Pref) — überstimmt System-Präferenz. */
:root[data-theme="dark"] {
  --color-bg-primary: #1A1A18;
  --color-bg-secondary: #131311;
  --color-bg-tertiary: #0E0E0C;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);

  --color-text-primary: #F5F5F0;
  --color-text-secondary: #B4B2A9;
  --color-text-tertiary: #888780;
  --color-text-inverse: #0F0F0E;

  --color-border-tertiary: rgba(255, 255, 255, 0.08);
  --color-border-secondary: rgba(255, 255, 255, 0.15);
  --color-border-primary: rgba(255, 255, 255, 0.25);

  --color-brand-50: #04342C;
  --color-brand-100: #085041;
  --color-brand-400: #5DCAA5;
  --color-brand-600: #9FE1CB;
  --color-brand-800: #E1F5EE;

  --color-success-bg: #085041;
  --color-success-text: #9FE1CB;
  --color-warning-bg: #633806;
  --color-warning-text: #FAC775;
  --color-danger-bg: #791F1F;
  --color-danger-text: #F09595;
  --color-info-bg: #0C447C;
  --color-info-text: #B5D4F4;
  --color-accent-bg: #3C3489;
  --color-accent-text: #CECBF6;

  --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --shadow-modal: 0 0 0 0.5px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}