/* ============================================================
   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 {
    --oo-font-size: 16px; /* Basis-Font-Size, kann für die gesamte App angepasst werden */
    /* ── 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);
    /* Leicht abgesetzte Fläche für Code, Codeblöcke und JSON; folgt der Graupalette, also auch dunklen Themes */
    --oo-surface-2: var(--oo-gray-150);
    --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);
    /* ── Schatten ── */
    --oo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --oo-shadow-lg: 0 0.5rem 1.5rem rgb(0 0 0 / 0.2);
    /* ── Stellschrauben ohne Standardwert ──
       Bewusst nicht hier definiert; die Komponenten haben einen Ersatzwert und lesen die Variable nur, wenn sie
       gesetzt ist:
       --oo-status-dot-size           Größe des StatusDot (Standard 0.5em), am Element oder global setzbar
       --oo-text-highlight-background Hintergrund der Text-Hervorhebung (Standard #fff176)
       --oo-text-highlight-color      Schrift der Text-Hervorhebung (Standard #111827)
       --oo-tooltip-dx                setzt tooltip.js selbst, damit der Tooltip im Fenster bleibt */
    /* ── 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 */
    /* Seitenrand links und rechts vom Inhalt (OoSpace.Gutter); in schmalen Containern kleiner, siehe Ende der Datei. */
    --oo-space-gutter: var(--oo-space-6); /* 24px, schmal 16px */
    /* ── Typografie ── */
    --oo-font-family: 'Source Sans Pro', 'Open Sans', 'Segoe UI', sans-serif;
    --oo-font-family-mono: ui-monospace, "Cascadia Code", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Festbreitenschrift für Code */
    /* ── 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 */
    /* xxxs (Für Button)*/
    /* Schriftgrößen --oo-font-size-* siehe unten (skalierbar) */
    --oo-size-line-height-xxxs: 1;
    --oo-size-min-height-xxxs: 1.1rem;
    --oo-size-floating-label-min-height-xxxs: 1.1rem;
    --oo-size-padding-xxxs-y: 0rem;
    --oo-size-padding-xxxs-x: 0.2rem;
    /* xxs (Für Button)*/
    --oo-size-line-height-xxs: 1.2;
    --oo-size-min-height-xxs: 1.3rem;
    --oo-size-floating-label-min-height-xxs: 1.3rem;
    --oo-size-padding-xxs-y: 0rem;
    --oo-size-padding-xxs-x: 0.3rem;
    /* xs */
    --oo-size-line-height-xs: 1.5;
    --oo-size-min-height-xs: 1.5rem;
    --oo-size-floating-label-min-height-xs: 1.625rem;
    --oo-size-padding-xs-y: 0rem;
    --oo-size-padding-xs-x: 0.5rem;
    /* sm */
    --oo-size-line-height-sm: 1.5;
    --oo-size-min-height-sm: 1.7rem;
    --oo-size-floating-label-min-height-sm: 2rem;
    --oo-size-padding-sm-y: 0rem;
    --oo-size-padding-sm-x: 0.5rem;
    /* md */
    --oo-size-line-height-md: 1.5;
    --oo-size-min-height-md: 2.1rem;
    --oo-size-floating-label-min-height-md: 2.5rem;
    --oo-size-padding-md-y: 0rem;
    --oo-size-padding-md-x: 0.6rem;
    /* lg */
    --oo-size-line-height-lg: 1.5;
    --oo-size-min-height-lg: 2.2rem;
    --oo-size-floating-label-min-height-lg: 2.75rem;
    --oo-size-padding-lg-y: 0rem;
    --oo-size-padding-lg-x: 0.7rem;
    /* xl */
    --oo-size-line-height-xl: 1.5;
    --oo-size-min-height-xl: 2.3rem;
    --oo-size-floating-label-min-height-xl: 3.25rem;
    --oo-size-padding-xl-y: 0rem;
    --oo-size-padding-xl-x: 0.8rem;
}

/* Schriftgrößen der Komponenten: Die App legt ihre Skala über die Basiswerte --oo-font-size-*-base auf :root fest. */
:root {
    --oo-font-size-xxxs-base: 0.75rem; /* 12px */
    --oo-font-size-xxs-base: 0.8rem; /* 12,8px */
    --oo-font-size-xs-base: 0.875rem; /* 14px */
    --oo-font-size-sm-base: 0.875rem; /* 14px */
    --oo-font-size-md-base: 0.875rem; /* 14px, Standardgröße für Fließtext und Komponenten */
    --oo-font-size-lg-base: 1rem; /* 16px */
    --oo-font-size-xl-base: 1.125rem; /* 18px */
    /* <small> (base.css): fest statt des Browser-Standards „smaller“, der bei 14 px nur 11,7 px ergibt. */
    --oo-font-size-small-base: 0.8125rem; /* 13px */
}

/* Verwendete Schriftgrößen: Basiswert mal --oo-font-scale (Standard 1). Nicht direkt überschreiben, sondern die Basiswerte.
   Ein Bereich wird größer oder kleiner, indem er die Klasse oo-font-scale trägt und --oo-font-scale setzt,
   etwa <div class="oo-font-scale" style="--oo-font-scale: 1.15">. Die Klasse ist nötig, weil die Tokens dort neu
   berechnet werden müssen; ein geerbtes Token behielte den Wert von :root. Abstände und Mindesthöhen bleiben. */
:root,
.oo-font-scale {
    --oo-font-size-xxxs: calc(var(--oo-font-size-xxxs-base) * var(--oo-font-scale, 1));
    --oo-font-size-xxs: calc(var(--oo-font-size-xxs-base) * var(--oo-font-scale, 1));
    --oo-font-size-xs: calc(var(--oo-font-size-xs-base) * var(--oo-font-scale, 1));
    --oo-font-size-sm: calc(var(--oo-font-size-sm-base) * var(--oo-font-scale, 1));
    --oo-font-size-md: calc(var(--oo-font-size-md-base) * var(--oo-font-scale, 1));
    --oo-font-size-lg: calc(var(--oo-font-size-lg-base) * var(--oo-font-scale, 1));
    --oo-font-size-xl: calc(var(--oo-font-size-xl-base) * var(--oo-font-scale, 1));
    --oo-font-size-small: calc(var(--oo-font-size-small-base) * var(--oo-font-scale, 1));
    /* Floating Label (base.css): Verkleinerung der Schrift, wenn das Label nach oben wandert.
       Wird von der Schriftgröße der jeweiligen Größe (xs–xl) abgezogen; Prozent beziehen sich auf die Elternschrift. */
    --oo-float-label-font-reduction: 10%;
}

/* Eingabe mit dem Finger: Die kleinste Knopfgröße xs (mit Symbol 23 px) ist zu knapp und wird auf 36 px angehoben.
   Sm und größer bleiben; angehoben wirkten sie am Handy wuchtig. Menüeinträge: siehe contextmenu.css. */
@media (pointer: coarse) {
    :root {
        --oo-size-min-height-xs: 2.25rem;
    }
}

/* Schmaler Container, etwa SidebarLayout am Handy oder ein schmales Panel: weniger Seitenrand (--oo-space-gutter), mehr Platz
   für den Inhalt. An jedem Element darin gesetzt, damit der kleinere Wert überall gilt, wo der Rand verwendet wird.
   Ohne umgebenden Container (container-type) bleibt der volle Rand. */
@container (max-width: 48rem) {
    * {
        --oo-space-gutter: var(--oo-space-4);
    }
}