/* ============================================================
   OO Design Tokens
   Präfix: --oo-
   Abstufungen via color-mix(in oklch) – nur die Primärfarben ändern,
   alle Stufen passen sich automatisch an. oklch erhält Sättigung + Hue besser als sRGB.
   Browser-Support: Chrome 111+, Firefox 113+, Safari 16.2+
   ============================================================ */

:root {
    /* ── Primärfarben (nur diese ändern) ── */
    --oo-primary: #598087;
    --oo-secondary: #7c3aed;
    --oo-danger: #dc2626;
    --oo-success: #16a34a;
    --oo-warning: #d97706;
    --oo-info: #0891b2;
    /* ── Primary Abstufungen ── */
    --oo-primary-lighter: color-mix(in oklch, var(--oo-primary) 50%, white);
    --oo-primary-light: color-mix(in oklch, var(--oo-primary) 80%, white);
    --oo-primary-dark: color-mix(in oklch, var(--oo-primary) 85%, black);
    --oo-primary-darker: color-mix(in oklch, var(--oo-primary) 65%, black);
    --oo-primary-on: #ffffff;
    /* ── Secondary Abstufungen ── */
    --oo-secondary-lighter: color-mix(in oklch, var(--oo-secondary) 50%, white);
    --oo-secondary-light: color-mix(in oklch, var(--oo-secondary) 80%, white);
    --oo-secondary-dark: color-mix(in oklch, var(--oo-secondary) 85%, black);
    --oo-secondary-darker: color-mix(in oklch, var(--oo-secondary) 65%, black);
    --oo-secondary-on: #ffffff;
    /* ── Danger Abstufungen ── */
    --oo-danger-lighter: color-mix(in oklch, var(--oo-danger) 50%, white);
    --oo-danger-light: color-mix(in oklch, var(--oo-danger) 80%, white);
    --oo-danger-dark: color-mix(in oklch, var(--oo-danger) 85%, black);
    --oo-danger-darker: color-mix(in oklch, var(--oo-danger) 65%, black);
    --oo-danger-on: #ffffff;
    /* ── Success Abstufungen ── */
    --oo-success-lighter: color-mix(in oklch, var(--oo-success) 50%, white);
    --oo-success-light: color-mix(in oklch, var(--oo-success) 80%, white);
    --oo-success-dark: color-mix(in oklch, var(--oo-success) 85%, black);
    --oo-success-darker: color-mix(in oklch, var(--oo-success) 65%, black);
    --oo-success-on: #ffffff;
    /* ── Warning Abstufungen ── */
    --oo-warning-lighter: color-mix(in oklch, var(--oo-warning) 50%, white);
    --oo-warning-light: color-mix(in oklch, var(--oo-warning) 80%, white);
    --oo-warning-dark: color-mix(in oklch, var(--oo-warning) 85%, black);
    --oo-warning-darker: color-mix(in oklch, var(--oo-warning) 65%, black);
    --oo-warning-on: #ffffff;
    /* ── Info Abstufungen ── */
    --oo-info-lighter: color-mix(in oklch, var(--oo-info) 50%, white);
    --oo-info-light: color-mix(in oklch, var(--oo-info) 80%, white);
    --oo-info-dark: color-mix(in oklch, var(--oo-info) 85%, black);
    --oo-info-darker: color-mix(in oklch, var(--oo-info) 65%, black);
    --oo-info-on: #ffffff;
    /* ── Grau-Palette ── */
    --oo-gray-50: #ffffff;
    --oo-gray-100: #f9fafb;
    --oo-gray-150: #f3f4f6;
    --oo-gray-200: #e5e7eb;
    --oo-gray-250: #dfe1e6;
    --oo-gray-300: #d1d5db;
    --oo-gray-350: #b8bcc4;
    --oo-gray-400: #9ca3af;
    --oo-gray-450: #848a97;
    --oo-gray-500: #6b7280;
    --oo-gray-550: #5b616d;
    --oo-gray-600: #4b5563;
    --oo-gray-650: #414957;
    --oo-gray-700: #374151;
    --oo-gray-750: #2d3544;
    --oo-gray-800: #1f2937;
    --oo-gray-850: #182030;
    --oo-gray-900: #111827;
    --oo-gray-950: #0a0f18;
    /* ── Neutral Abstufungen ── */
    --oo-neutral: var(--oo-gray-250);
    --oo-neutral-lighter: var(--oo-gray-100);
    --oo-neutral-light: var(--oo-gray-150);
    --oo-neutral-dark: var(--oo-gray-300);
    --oo-neutral-darker: var(--oo-gray-350);
    --oo-neutral-on: var(--oo-gray-750);
    --oo-neutral-outline: var(--oo-gray-550); /* Outline/Ghost-Text + Border für Neutral */
    /* ── Black Abstufungen ── */
    --oo-black: var(--oo-gray-550);
    --oo-black-lighter: var(--oo-gray-350);
    --oo-black-light: var(--oo-gray-450);
    --oo-black-dark: var(--oo-gray-700);
    --oo-black-darker: var(--oo-gray-800);
    --oo-black-on: #ffffff;
    /* ── Semantische Farb-Aliase ── */
    --oo-color-background: var(--oo-gray-100);
    --oo-color-surface: var(--oo-gray-50);
    --oo-color-border: var(--oo-gray-200);
    --oo-color-border-strong: var(--oo-gray-300);
    --oo-color-text: var(--oo-gray-900);
    --oo-color-text-subtle: var(--oo-gray-700);
    --oo-color-text-disabled: var(--oo-gray-400);
    /* ── Border ── */
    --oo-border-width: 0.0625rem; /* 1px */
    --oo-border-radius: var(--oo-radius-md);
    /* ── Border-Radius ── */
    --oo-radius-sm: 0.25rem; /* 4px  */
    --oo-radius-md: 0.375rem; /* 6px  */
    --oo-radius-lg: 0.625rem; /* 10px */
    --oo-radius-xl: 1rem; /* 16px */
    --oo-radius-full: 999rem;
    /* ── Spacing ── */
    --oo-space-1: 0.25rem; /* 4px  */
    --oo-space-2: 0.5rem; /* 8px  */
    --oo-space-3: 0.75rem; /* 12px */
    --oo-space-4: 1rem; /* 16px */
    --oo-space-5: 1.25rem; /* 20px */
    --oo-space-6: 1.5rem; /* 24px */
    --oo-space-8: 2rem; /* 32px */
    /* ── Typografie ── */
    --oo-font-family: 'Source Sans Pro', 'Open Sans', 'Segoe UI', sans-serif;
    --oo-font-size-xs: 0.6875rem; /* 11px */
    --oo-font-size-sm: 0.75rem; /* 12px */
    --oo-font-size-md: 0.875rem; /* 14px */
    --oo-font-size-lg: 1rem; /* 16px */
    --oo-font-size-xl: 1.125rem; /* 18px */
    /* ── Button-Padding-Presets ── */
    --oo-btn-padding-xs-y: 0.08em;
    --oo-btn-padding-xs-x: 0.2em;
    --oo-btn-padding-sm-y: 0.15em;
    --oo-btn-padding-sm-x: 0.35em;
    --oo-btn-padding-md-y: 0.2em;
    --oo-btn-padding-md-x: 0.5em;
    --oo-btn-padding-lg-y: 0.4em;
    --oo-btn-padding-lg-x: 0.9em;
    --oo-btn-padding-xl-y: 0.65em;
    --oo-btn-padding-xl-x: 1.4em;
    /* ── Select/Multiselect-Padding-Presets ── */
    --oo-select-padding-xs-y: 0.2em;
    --oo-select-padding-xs-x: 0.45em;
    --oo-select-padding-sm-y: 0.35em;
    --oo-select-padding-sm-x: 0.6em;
    --oo-select-padding-md-y: 0.5em;
    --oo-select-padding-md-x: 0.75em;
    --oo-select-padding-lg-y: 0.75em;
    --oo-select-padding-lg-x: 1em;
    --oo-select-padding-xl-y: 1em;
    --oo-select-padding-xl-x: 1.4em;
    /* ── Transitions ── */
    --oo-transition-fast: 100ms ease;
    --oo-transition: 150ms ease;
    /*transition: font-size 0.25s ease, transform 0.25s ease;*/
    --oo-transition-slow: 300ms ease;
    /* ── Z-Index ── */
    --oo-z-dropdown: 1000;
    --oo-z-overlay: 1100;
    --oo-z-modal: 1200;
    --oo-z-context-menu: 1300;
    --oo-z-toast: 1400;
    /* oo-size - hauptsächlich inputs und Buttons */
    /* xs */
    --oo-size-min-height-xs: 1.625rem;
    --oo-size-padding-xs-y: 0.25rem;
    --oo-size-padding-xs-x: 0.5rem;
    /* sm */
    --oo-size-min-height-sm: 2rem;
    --oo-size-padding-sm-y: 0.25rem;
    --oo-size-padding-sm-x: 0.75rem;
    /* md */
    --oo-size-min-height-md: 2.5rem;
    --oo-size-padding-md-y: 0.5rem;
    --oo-size-padding-md-x: 1rem;
    /* lg */
    --oo-size-min-height-lg: 2.75rem;
    --oo-size-padding-lg-y: 0.25rem;
    --oo-size-padding-lg-x: 1.25rem;
    /* xl */
    --oo-size-min-height-xl: 3.25rem;
    --oo-size-padding-xl-y: 0.25rem;
    --oo-size-padding-xl-x: 1.5rem;
    /* Inputs – Basis-Werte (alle Stufen leiten sich daraus ab) */
    /*--oo-size-base-height: 2.5rem;*/ /* 40px – md-Referenzgröße */
    /*--oo-size-base-padding-y: 0.25rem;*/ /* 4px – vertikales Grund-Padding */
    /*--oo-size-base-padding-x: 0.5rem;*/ /* 12px – horizontales Grund-Padding */
    /* Abgeleitete min-height pro Stufe */
    /*--oo-size-min-height-xs: calc(var(--oo-size-base-height) * 0.65);*/ /* 26px */
    /*--oo-size-min-height-sm: calc(var(--oo-size-base-height) * 0.8);*/ /* 32px */
    /*--oo-size-min-height-md: var(--oo-size-base-height);*/ /* 40px */
    /*--oo-size-min-height-lg: calc(var(--oo-size-base-height) * 1.1);*/ /* 44px */
    /*--oo-size-min-height-xl: calc(var(--oo-size-base-height) * 1.3);*/ /* 52px */
    /* Abgeleitetes Padding pro Stufe */
    /*--oo-size-padding-xs-y: var(--oo-size-base-padding-y);*/ /* 4px */
    /*--oo-size-padding-xs-x: calc(var(--oo-size-base-padding-x) * 0.67);*/ /* 8px */
    /*--oo-size-padding-sm-y: var(--oo-size-base-padding-y);*/ /* 4px */
    /*--oo-size-padding-sm-x: var(--oo-size-base-padding-x);*/ /* 12px */
    /*--oo-size-padding-md-y: calc(var(--oo-size-base-padding-y) * 2);*/ /* 8px */
    /*--oo-size-padding-md-x: calc(var(--oo-size-base-padding-x) * 1.33);*/ /* 16px */
    /*--oo-size-padding-lg-y: var(--oo-size-base-padding-y);*/ /* 4px */
    /*--oo-size-padding-lg-x: calc(var(--oo-size-base-padding-x) * 1.67);*/ /* 20px */
    /*--oo-size-padding-xl-y: var(--oo-size-base-padding-y);*/ /* 4px */
    /*--oo-size-padding-xl-x: calc(var(--oo-size-base-padding-x) * 2);*/ /* 24px */
}