/* ============================================================================
   DEPARTMENT V2 — DESIGN TOKENS  ·  "Onyx + Amber"
   Dark = warmes Schwarz-Grau (kein Blau). Light = warmes Off-White.
   --accent ist pro Behörde zur Laufzeit überschreibbar.
   ============================================================================ */

:root {
    /* Typografie */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    --text-2xs: .6875rem;   /* 11 */
    --text-xs:  .75rem;     /* 12 */
    --text-sm:  .8125rem;   /* 13 */
    --text-md:  .875rem;    /* 14 */
    --text-base: .9375rem;  /* 15 */
    --text-lg:  1.0625rem;  /* 17 */
    --text-xl:  1.375rem;   /* 22 */
    --text-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
    --text-3xl: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);

    /* Spacing-Skala */
    --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;    --sp-10: 2.5rem;
    --sp-12: 3rem;   --sp-16: 4rem;

    /* Radii */
    --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px;
    --r-full: 999px;

    /* Layout */
    --sidebar-w: 270px;
    --topbar-h: 64px;
    --container: 1320px;

    /* Timing */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: 130ms;
    --t-base: 220ms;
    --t-slow: 380ms;

    /* Akzent (Standard: Amber/Gold) — per Behörde via --accent überschreibbar.
       Alle Folgetöne werden aus --accent abgeleitet, damit jede Behördenfarbe
       einen sauberen, einfarbigen Verlauf ergibt (kein Amber/Grün-Mix). */
    --accent:        #f59e0b;
    --accent-2:      color-mix(in srgb, var(--accent), #fff 16%);
    --accent-soft:   color-mix(in srgb, var(--accent), transparent 88%);
    --accent-glow:   color-mix(in srgb, var(--accent), transparent 72%);
    --accent-ink:    color-mix(in srgb, var(--accent), #000 80%);
}

/* ----------------------------- DARK (Default) ----------------------------- */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --bg-body:     #0c0a09;
    --bg-base:     #100d0b;
    --surface:     #1a1613;
    --surface-2:   #211c18;
    --surface-3:   #29231e;
    --elevated:    #241f1a;
    --sunken:      #0a0807;
    --input-bg:    #15110f;
    --overlay:     rgba(8, 6, 5, .66);

    --line:        rgba(245, 240, 235, .07);
    --line-2:      rgba(245, 240, 235, .12);
    --line-soft:   rgba(245, 240, 235, .04);

    --text:        #ede8e2;
    --text-dim:    #b3a99f;
    --text-mute:   #837a71;
    --text-faint:  #5c544c;

    --success:  #34d399; --success-soft: rgba(52, 211, 153, .12); --success-ink:#34d399;
    --warning:  #fbbf24; --warning-soft: rgba(251, 191, 36, .12); --warning-ink:#fbbf24;
    --danger:   #fb7185; --danger-soft:  rgba(251, 113, 133, .12); --danger-ink:#fb7185;
    --info:     #38bdf8; --info-soft:    rgba(56, 189, 248, .12);  --info-ink:#38bdf8;

    --sidebar-bg:  #0a0807;
    --sidebar-line: rgba(245, 240, 235, .06);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.4);
    --shadow-glow: 0 0 0 3px var(--accent-soft);

    --grain-opacity: .035;
}

/* ------------------------------- LIGHT ------------------------------------ */
[data-theme="light"] {
    color-scheme: light;

    --bg-body:     #f4f1ec;
    --bg-base:     #efe9e2;
    --surface:     #ffffff;
    --surface-2:   #faf7f2;
    --surface-3:   #f2ede6;
    --elevated:    #ffffff;
    --sunken:      #ece6dd;
    --input-bg:    #f6f2ec;
    --overlay:     rgba(28, 25, 23, .42);

    --line:        rgba(28, 25, 23, .10);
    --line-2:      rgba(28, 25, 23, .16);
    --line-soft:   rgba(28, 25, 23, .05);

    --text:        #1c1917;
    --text-dim:    #57514b;
    --text-mute:   #8a817a;
    --text-faint:  #b3aaa1;

    --accent:        #d97706;
    --accent-2:      color-mix(in srgb, var(--accent), #fff 14%);
    --accent-soft:   color-mix(in srgb, var(--accent), transparent 90%);
    --accent-glow:   color-mix(in srgb, var(--accent), transparent 78%);
    --accent-ink:    #ffffff;

    --success:  #059669; --success-soft: rgba(5, 150, 105, .10); --success-ink:#047857;
    --warning:  #b45309; --warning-soft: rgba(180, 83, 9, .10);  --warning-ink:#92400e;
    --danger:   #e11d48; --danger-soft:  rgba(225, 29, 72, .10); --danger-ink:#be123c;
    --info:     #0284c7; --info-soft:    rgba(2, 132, 199, .10); --info-ink:#0369a1;

    --sidebar-bg:  #17120f;
    --sidebar-line: rgba(245, 240, 235, .07);

    --shadow-sm: 0 1px 2px rgba(28,25,23,.06);
    --shadow-md: 0 10px 30px rgba(28,25,23,.10), 0 2px 6px rgba(28,25,23,.05);
    --shadow-lg: 0 24px 60px rgba(28,25,23,.16), 0 6px 16px rgba(28,25,23,.08);
    --shadow-glow: 0 0 0 3px var(--accent-soft);

    --grain-opacity: 0;
}