/* =========================================================================
   Design Tokens — zentrale Quelle der Wahrheit fuer das gesamte Styling.
   Wird VOR main.css geladen. Komponenten verwenden ausschliesslich diese
   Tokens (bzw. die darauf gemappten --pico-* Variablen), nie Hartwerte.

   Aufbau:
   - themenunabhaengige Tokens (Marke, Typo, Spacing, Radien, Layout)
   - semantische FARB-Tokens je Theme: [data-theme="dark"] / [data-theme="light"]
   ========================================================================= */
:root {
    /* ---- Marke (themenunabhaengig) ----------------------------------- */
    /* Wärmeres, leicht entsättigtes Rot (terracotta-Einschlag, Claude-näher) */
    --color-red-600: #8f2d22;
    --color-red-500: #b23a2e;   /* Markenfarbe */
    --color-red-400: #c44a3b;   /* Hover */
    --brand:       var(--color-red-500);
    --brand-hover: var(--color-red-400);

    /* ---- Status (themenunabhaengig) ---------------------------------- */
    --color-success: #2faf2f;
    --color-error:   #c23434;
    --color-warning: #e6b800;
    --color-info:    #37586f;

    /* ---- Typografie -------------------------------------------------- */
    --font-sans: "Geist", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu,
                 Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;

    --font-size-root: 15px;   /* Basis (html) — kompakter Claude-Look; 16 = etwas groesser, 14 = kompakter */

    /* ruhige modulare Skala, relativ zur Basis (1rem = --font-size-root) */
    --fs-2xs:  0.625rem;   /* ~9–10 — Mikro-Labels/Badges */
    --fs-xs:   0.75rem;    /* 12 */
    --fs-sm:   0.875rem;   /* 14 */
    --fs-base: 1rem;       /* 16 */
    --fs-md:   1.125rem;   /* 18 */
    --fs-lg:   1.25rem;    /* 20 */
    --fs-xl:   1.5rem;     /* 24 */
    --fs-2xl:  1.875rem;   /* 30 */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;   /* Headings/Buttons — ruhiger als Bold (Claude-Stil) */
    --fw-bold:     700;

    /* Line-Heights: eng (Headings) · snug (dichtes UI) · base (Fliesstext) */
    --lh-tight: 1.2;
    --lh-snug:  1.45;
    --lh-base:  1.6;

    /* Letter-Spacing: Headings leicht negativ (Claude-typisch), UI neutral */
    --tracking-tight:  -0.01em;
    --tracking-normal: 0;

    /* ---- Spacing-Skala (4px-Basis) ----------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4 */
    --space-2: 0.5rem;   /* 8 */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.25rem;  /* 20 */
    --space-6: 1.5rem;   /* 24 */
    --space-7: 2rem;     /* 32 */
    --space-8: 2.5rem;   /* 40 */
    --space-9: 3rem;     /* 48 */

    /* ---- Radien ------------------------------------------------------ */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-full: 999px;

    /* ---- Layout ------------------------------------------------------ */
    --topbar-height: 55px;
    --sidebar-width: 248px;
    --content-max:   1040px;   /* einheitliche, zentrierte Inhaltsbreite (alle Seiten) */
    --mobile-nav-height: 70px;   /* Hoehe der unteren Icon-Tab-Leiste (mobil) */
    --action-bar-h: 76px;        /* ungefaehre Hoehe der fixen Action-Bar (Spacer) */
}

/* =========================================================================
   DARK THEME (Standard) — warme, neutrale Toene angelehnt an Claude.
   ========================================================================= */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --color-black:     #000000;
    --color-bg:        #262624; /* Inhaltshintergrund (warmes Dunkel) */
    --color-surface-1: #30302e; /* Karten */
    --color-surface-2: #2a2a27; /* Navigation / Toolbar */
    --color-surface-3: #1f1e1d; /* Bodenleiste (mobil) */
    --color-cardform:  #2d2d2a; /* Formular-Karten */
    --color-sidebar:   #1c1b19; /* linke Seitenleiste */
    --color-border:    #3b3a36;

    --color-text:        #e6e4dc;
    --color-text-strong: #faf9f5;
    --color-text-muted:  #9e9b92;

    --hover-soft:   rgba(255, 255, 255, 0.055);
    --hover-strong: rgba(255, 255, 255, 0.09);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   LIGHT THEME — warmes Off-White, ebenfalls an Claude angelehnt.
   ========================================================================= */
[data-theme="light"] {
    color-scheme: light;

    --color-black:     #ffffff;
    --color-bg:        #faf9f5;
    --color-surface-1: #ffffff;
    --color-surface-2: #f2f1eb;
    --color-surface-3: #efede6;
    --color-cardform:  #ffffff;
    --color-sidebar:   #f1efe8;
    --color-border:    #e3e1d7;

    --color-text:        #3f3e3a;
    --color-text-strong: #1a1a17;
    --color-text-muted:  #76746b;

    --hover-soft:   rgba(0, 0, 0, 0.045);
    --hover-strong: rgba(0, 0, 0, 0.08);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px -10px rgba(0, 0, 0, 0.18);
}