/* ─────────────────────────────────────────────────────────────────────
   sortry — Design-Tokens (Neuaufbau, modern & ruhig)
   Petrol trägt die Flaeche, Violett ist der sparsame Akzent.
   Dark Mode ist über semantische Tokens vorbereitet, aber nicht aktiv.
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* ── Marken-Palette ──────────────────────────────────────────── */
    --petrol-700: #005C66;
    --petrol-600: #007A85;
    --petrol-500: #008590;   /* primaer */
    --petrol-400: #17A1AC;
    --petrol-300: #6FC7CE;
    --petrol-100: #DCF1F3;
    --petrol-50:  #EEF8F9;

    --violet-600: #6A57B3;
    --violet-500: #7860B5;   /* akzent */
    --violet-400: #9A85D0;
    --violet-100: #ECE6FB;
    --violet-50:  #F5F1FE;

    /* ── Neutrale (leicht kuehl, petrolstichig) ──────────────────── */
    --ink:        #16201F;
    --slate-800:  #263231;
    --slate-600:  #4C5A5B;
    --slate-500:  #6A7779;
    --slate-400:  #93A0A1;
    --slate-300:  #C2CCCD;
    --slate-200:  #DEE6E6;
    --slate-150:  #E8EEEE;
    --slate-100:  #F0F4F4;
    --slate-50:   #F6F9F9;
    --white:      #FFFFFF;

    /* ── Status ──────────────────────────────────────────────────── */
    --danger:      #D2453C;
    --danger-600:  #B5372F;
    --danger-50:   #FDECEA;
    --success:     #1F9E6E;
    --success-50:  #E5F6EF;
    --warning:     #C88A1E;
    --warning-50:  #FBF1DE;

    /* ── Behälter-Farbpalette (Farbschlüssel -> Anzeigefarbe) ──── */
    --c-petrol:  #008590;
    --c-violett: #7860B5;
    --c-blau:    #3B76C4;
    --c-gruen:   #2E9E6B;
    --c-gelb:    #E4B62C;
    --c-orange:  #E5893B;
    --c-rot:     #D2453C;
    --c-pink:    #D65D9B;
    --c-grau:    #8A9698;
    --c-braun:   #9A6B4B;

    /* ── Semantische Tokens (Dark Mode hier überschreiben) ──────── */
    --bg-app:        #F1F5F5;
    --bg-surface:    var(--white);
    --bg-raised:     var(--white);
    --bg-sunken:     var(--slate-100);
    --bg-hover:      var(--slate-100);
    --bg-active:     var(--petrol-50);

    --text-strong:   var(--ink);
    --text-normal:   var(--slate-800);
    --text-muted:    var(--slate-500);
    --text-faint:    var(--slate-400);
    --text-onPrimary:#FFFFFF;

    --border:        var(--slate-150);
    --border-strong: var(--slate-200);
    --divider:       var(--slate-100);

    --primary:       var(--petrol-500);
    --primary-hover: var(--petrol-600);
    --primary-press: var(--petrol-700);
    --primary-tint:  var(--petrol-50);
    --primary-tint-2:var(--petrol-100);
    --on-primary:    #FFFFFF;

    --accent:        var(--violet-500);
    --accent-hover:  var(--violet-600);
    --accent-tint:   var(--violet-50);
    --accent-tint-2: var(--violet-100);
    --accent-text:   var(--violet-600);

    --focus-ring:    color-mix(in srgb, var(--petrol-500) 30%, transparent);

    /* Verlaeufe (gezielt für Icon, Hero, Login) */
    --grad-icon: linear-gradient(140deg, #0A97A2 0%, #7860B5 100%);
    --grad-hero: linear-gradient(120deg, #006E78 0%, #5F4CA6 100%);
    --grad-soft: radial-gradient(130% 150% at 12% 0%, #12A3AE 0%, #6A4FA9 100%);

    /* ── Typografie ──────────────────────────────────────────────── */
    --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-xs:   0.75rem;    /* 12 */
    --fs-sm:   0.8125rem;  /* 13 */
    --fs-md:   0.875rem;   /* 14 */
    --fs-base: 0.9375rem;  /* 15 */
    --fs-lg:   1.0625rem;  /* 17 */
    --fs-xl:   1.375rem;   /* 22 */
    --fs-2xl:  1.75rem;    /* 28 */
    --fs-3xl:  2.125rem;   /* 34 */

    /* ── Abstaende ───────────────────────────────────────────────── */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;     --sp-8: 4rem;

    /* ── Radien ──────────────────────────────────────────────────── */
    --r-sm:  6px;
    --r-md:  9px;
    --r-lg:  13px;
    --r-xl:  18px;
    --r-2xl: 24px;
    --r-pill: 999px;

    /* ── Kontrollhoehen ──────────────────────────────────────────── */
    --control-h:    40px;
    --control-h-sm: 32px;
    --control-h-lg: 48px;

    /* ── Schatten (weich, mehrschichtig) ─────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(22, 40, 42, 0.05);
    --shadow-sm: 0 1px 2px rgba(22, 40, 42, 0.05), 0 1px 1px rgba(22, 40, 42, 0.03);
    --shadow-md: 0 2px 4px rgba(22, 40, 42, 0.04), 0 8px 24px -12px rgba(22, 40, 42, 0.12);
    --shadow-lg: 0 4px 8px rgba(22, 40, 42, 0.05), 0 24px 48px -16px rgba(22, 40, 42, 0.22);
    --shadow-float: 0 2px 6px rgba(22, 40, 42, 0.05), 0 16px 40px -18px rgba(22, 40, 42, 0.20);

    /* ── Layout ──────────────────────────────────────────────────── */
    --sidebar-w: 320px;
    --sidebar-gap: 16px;
    --content-pad-x: clamp(20px, 3vw, 44px);
    --content-pad-y: 32px;

    /* ── Uebergaenge ─────────────────────────────────────────────── */
    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-med:  200ms cubic-bezier(0.4, 0, 0.2, 1);

    --z-dropdown: 1200;
    --z-modal: 1000;
    --z-toast: 1300;
}