/**
 * Purpose:    Defines every design token: color, spacing, type scale, radius,
 *             shadow — as CSS custom properties on :root.
 * Depends on: Nothing. This is the base layer everything else builds on.
 * Used by:    Linked first, before base/layout/components/utilities, in
 *             views/layout/app.php and views/layout/guest.php.
 * UI rules:   THE rule for which token to use where lives in
 *             _docs/design-system.md, not here. This file only defines them.
 * Note:       Two layers: primitives (color ramps, fixed) and semantic tokens
 *             (--bg-*, --text-*, --border-*, --accent-*). Components must use
 *             ONLY the semantic layer — that is what keeps dark mode a pure
 *             token swap instead of a component change.
 */

:root {
    /* ---------- Primitive: Neutral (kuehles Slate) ---------- */
    --neutral-0:   #ffffff;
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;

    /* ---------- Primitive: Brand (verankert auf dem Logo-Blau = 600) ---------- */
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-800: #1e40af;
    --brand-900: #1e3a8a;

    /* ---------- Primitive: Status ---------- */
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;

    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    /* ---------- Abstand (4px-Basis) ---------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ---------- Radius ---------- */
    --radius-sm:   6px;
    --radius-md:   8px;   /* alle Buttons und Felder, unabhaengig von der Groesse */
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ---------- Typografie ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    --tracking-tight: -0.02em;
    --tracking-wide:   0.04em;

    /* ---------- Steuerelement-Hoehen (bringt Buttons und Felder auf eine Linie) ---------- */
    --control-h-sm: 2rem;    /* 32px */
    --control-h:    2.5rem;  /* 40px */
    --control-h-lg: 3rem;    /* 48px */

    /* ---------- Bewegung ---------- */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);

    /* ---------- Layout ---------- */
    --container-narrow: 26rem;
    --container-page:   76rem;
    --sidebar-w:        264px;
    --topbar-h:         56px;
    /* Breakpoints (in reinem CSS nicht tokenisierbar, hier als Referenz):
       640px / 900px / 1200px */

    /* ===================================================================
       Semantische Ebene — HELLES Theme.
       Steht bewusst auf blankem :root, damit die dunklen Bloecke weiter
       unten nur die geaenderten Tokens ueberschreiben muessen.
       =================================================================== */
    color-scheme: light;

    --bg-canvas:  var(--neutral-50);
    --bg-surface: var(--neutral-0);
    --bg-raised:  var(--neutral-0);
    --bg-subtle:  var(--neutral-100);
    --bg-inset:   var(--neutral-50);

    --text-strong:    var(--neutral-900);
    --text-default:   var(--neutral-700);
    --text-muted:     var(--neutral-500);
    --text-subtle:    var(--neutral-400);
    --text-on-accent: #ffffff;

    --border-subtle:  var(--neutral-200);
    --border-default: var(--neutral-300);
    --border-strong:  var(--neutral-400);

    /* --accent bleibt in BEIDEN Themes brand-600: Weiss darauf ergibt 5.17:1
       und erfuellt damit AA auch fuer kleine Buttonbeschriftungen. Ein hellerer
       Ton (brand-500) kaeme mit Weiss nur auf 3.68:1. Fuer Text/Icons auf
       dunklem Grund gibt es stattdessen --accent-text. */
    --accent:        var(--brand-600);
    --accent-hover:  var(--brand-700);
    --accent-active: var(--brand-800);
    --accent-text:   var(--brand-700);
    --accent-subtle: var(--brand-50);
    --accent-subtle-hover: var(--brand-100);
    --accent-border: var(--brand-200);

    --ring: rgba(37, 99, 235, 0.35);

    --info-bg:     var(--brand-50);
    --info-border: var(--brand-200);
    --info-text:   var(--brand-700);

    --success-bg:     var(--success-50);
    --success-border: var(--success-200);
    --success-text:   var(--success-700);

    --warning-bg:     var(--warning-50);
    --warning-border: var(--warning-200);
    --warning-text:   var(--warning-700);

    --danger-bg:     var(--danger-50);
    --danger-border: var(--danger-200);
    --danger-text:   var(--danger-700);

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);

    /* Modal-Overlay. Gleich dunkel in beiden Themes (kein eigener Dark-Wert noetig,
       anders als --ring) — ein Overlay muss in beiden Themes gleich stark abdunkeln. */
    --overlay: rgba(2, 6, 23, 0.6);
}

/* ===================================================================
   DUNKLES Theme.
   Zweimal definiert, damit die manuelle Wahl in BEIDE Richtungen gewinnt:
   - Systemwunsch dunkel, solange nicht ausdruecklich "light" gewaehlt wurde
   - ausdrueckliche Wahl "dark", unabhaengig vom Systemwunsch
   Der Inhalt beider Bloecke ist identisch (--dark-* Muster liesse sich in
   reinem CSS nicht ohne Duplikat aufloesen).
   =================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg-canvas:  var(--neutral-950);
        --bg-surface: var(--neutral-900);
        --bg-raised:  var(--neutral-800);
        --bg-subtle:  var(--neutral-800);
        --bg-inset:   var(--neutral-950);

        --text-strong:  var(--neutral-50);
        --text-default: var(--neutral-300);
        --text-muted:   var(--neutral-400);
        --text-subtle:  var(--neutral-500);

        --border-subtle:  var(--neutral-800);
        --border-default: var(--neutral-700);
        --border-strong:  var(--neutral-600);

        /* Hover geht hier heller statt dunkler. */
        --accent-hover:  var(--brand-500);
        --accent-active: var(--brand-400);
        --accent-text:   var(--brand-400);
        --accent-subtle: rgba(59, 130, 246, 0.15);
        --accent-subtle-hover: rgba(59, 130, 246, 0.24);
        --accent-border: rgba(59, 130, 246, 0.40);

        --ring: rgba(96, 165, 250, 0.45);

        /* Auf dunklem Grund tragen durchscheinende Tints besser als die
           blassen 50er-Stufen, die dort fast weiss wirken. */
        --info-bg:     rgba(59, 130, 246, 0.15);
        --info-border: rgba(59, 130, 246, 0.35);
        --info-text:   var(--brand-400);

        --success-bg:     rgba(34, 197, 94, 0.15);
        --success-border: rgba(34, 197, 94, 0.35);
        --success-text:   var(--success-400);

        --warning-bg:     rgba(245, 158, 11, 0.15);
        --warning-border: rgba(245, 158, 11, 0.35);
        --warning-text:   var(--warning-400);

        --danger-bg:     rgba(239, 68, 68, 0.15);
        --danger-border: rgba(239, 68, 68, 0.35);
        --danger-text:   var(--danger-400);

        /* Schatten tragen auf dunklem Grund kaum — flacher halten, die
           Trennwirkung uebernehmen die Rahmen. */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-canvas:  var(--neutral-950);
    --bg-surface: var(--neutral-900);
    --bg-raised:  var(--neutral-800);
    --bg-subtle:  var(--neutral-800);
    --bg-inset:   var(--neutral-950);

    --text-strong:  var(--neutral-50);
    --text-default: var(--neutral-300);
    --text-muted:   var(--neutral-400);
    --text-subtle:  var(--neutral-500);

    --border-subtle:  var(--neutral-800);
    --border-default: var(--neutral-700);
    --border-strong:  var(--neutral-600);

    --accent-hover:  var(--brand-500);
    --accent-active: var(--brand-400);
    --accent-text:   var(--brand-400);
    --accent-subtle: rgba(59, 130, 246, 0.15);
    --accent-subtle-hover: rgba(59, 130, 246, 0.24);
    --accent-border: rgba(59, 130, 246, 0.40);

    --ring: rgba(96, 165, 250, 0.45);

    --info-bg:     rgba(59, 130, 246, 0.15);
    --info-border: rgba(59, 130, 246, 0.35);
    --info-text:   var(--brand-400);

    --success-bg:     rgba(34, 197, 94, 0.15);
    --success-border: rgba(34, 197, 94, 0.35);
    --success-text:   var(--success-400);

    --warning-bg:     rgba(245, 158, 11, 0.15);
    --warning-border: rgba(245, 158, 11, 0.35);
    --warning-text:   var(--warning-400);

    --danger-bg:     rgba(239, 68, 68, 0.15);
    --danger-border: rgba(239, 68, 68, 0.35);
    --danger-text:   var(--danger-400);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
}