/**
 * SpacePanel UI — Design Tokens
 *
 * Zentrale Token-Datei für das gesamte Designsystem.
 * Alle Komponenten referenzieren ausschließlich diese Variablen.
 * Prefix: --sp-
 *
 * Farbpalette: Eigenständiges Sci-Fi Console Design
 * Inspiration: Warme Amber/Gold/Lavender-Töne, dunkler Hintergrund
 */

:root {

	/* ===========================
	   Farben — Hintergründe
	   =========================== */
	--sp-color-bg:            #000000;
	--sp-color-surface:       #0a0a12;
	--sp-color-panel:         #151520;
	--sp-color-panel-alt:     #1a1a28;
	--sp-color-panel-border:  #2a2540;
	--sp-color-divider:       #1e1830;

	/* ===========================
	   Farben — Console Palette
	   Panel-Farben für das Interface
	   =========================== */
	--sp-color-amber:         #e8a832;
	--sp-color-amber-light:   #f4c56c;
	--sp-color-tangerine:     #e87848;
	--sp-color-coral:         #d06848;
	--sp-color-mauve:         #c878b0;
	--sp-color-lavender:      #a088c8;
	--sp-color-periwinkle:    #8890d8;
	--sp-color-sky:           #7098d0;
	--sp-color-ice:           #88b8e0;
	--sp-color-sand:          #c8a878;
	--sp-color-sand-light:    #d8c8a0;
	--sp-color-plum:          #785898;

	/* ===========================
	   Farben — Semantische Zuordnung
	   =========================== */
	--sp-color-accent:        var(--sp-color-amber);
	--sp-color-accent-hover:  var(--sp-color-amber-light);
	--sp-color-accent-muted:  rgba(232, 168, 50, 0.15);
	--sp-color-secondary:     var(--sp-color-periwinkle);
	--sp-color-secondary-hover: #9aa0e4;

	/* ===========================
	   Farben — Status
	   =========================== */
	--sp-color-success:       #68c890;
	--sp-color-warning:       var(--sp-color-amber);
	--sp-color-danger:        var(--sp-color-coral);
	--sp-color-info:          var(--sp-color-ice);

	/* ===========================
	   Farben — Text
	   =========================== */
	--sp-color-text:          #e8e0d8;
	--sp-color-text-heading:  #ffffff;
	--sp-color-text-muted:    #a098b0;
	--sp-color-text-inverse:  #080808;
	--sp-color-text-on-panel: #080808;
	--sp-color-link:          var(--sp-color-amber);
	--sp-color-link-hover:    var(--sp-color-amber-light);

	/* ===========================
	   Typografie — Font Stacks
	   =========================== */
	--sp-font-base:           "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
	--sp-font-heading:        "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
	--sp-font-mono:           "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;

	/* ===========================
	   Typografie — Schriftgrößen
	   (Größer für bessere Lesbarkeit)
	   =========================== */
	--sp-text-xs:             0.875rem;
	--sp-text-sm:             1rem;
	--sp-text-base:           1.125rem;
	--sp-text-md:             1.25rem;
	--sp-text-lg:             1.5rem;
	--sp-text-xl:             1.75rem;
	--sp-text-2xl:            2.25rem;
	--sp-text-3xl:            2.75rem;
	--sp-text-4xl:            3.5rem;
	--sp-text-5xl:            4.5rem;

	/* ===========================
	   Typografie — Zeilenhöhe
	   =========================== */
	--sp-leading-tight:       1.25;
	--sp-leading-normal:      1.6;
	--sp-leading-relaxed:     1.8;

	/* ===========================
	   Typografie — Schriftstärke
	   =========================== */
	--sp-weight-normal:       400;
	--sp-weight-medium:       500;
	--sp-weight-semibold:     600;
	--sp-weight-bold:         700;

	/* ===========================
	   Abstände (Spacing)
	   =========================== */
	--sp-space-2xs:           0.25rem;
	--sp-space-xs:            0.5rem;
	--sp-space-sm:            0.75rem;
	--sp-space-md:            1rem;
	--sp-space-lg:            1.5rem;
	--sp-space-xl:            2rem;
	--sp-space-2xl:           3rem;
	--sp-space-3xl:           4rem;
	--sp-space-4xl:           6rem;

	/* ===========================
	   Border Radius
	   Console-typisch: starke Rundungen an Endkappen
	   =========================== */
	--sp-radius-sm:           4px;
	--sp-radius-md:           6px;
	--sp-radius-panel:        12px;
	--sp-radius-lg:           16px;
	--sp-radius-endcap:       999px;
	--sp-radius-full:         9999px;

	/* ===========================
	   Schatten
	   =========================== */
	--sp-shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.4);
	--sp-shadow-panel:        0 2px 8px rgba(0, 0, 0, 0.5);
	--sp-shadow-lg:           0 4px 16px rgba(0, 0, 0, 0.6);
	--sp-shadow-glow:         0 0 12px rgba(232, 168, 50, 0.15);

	/* ===========================
	   Console Bar Größen
	   =========================== */
	--sp-bar-height-sm:       8px;
	--sp-bar-height-md:       16px;
	--sp-bar-height-lg:       32px;
	--sp-bar-height-xl:       48px;
	--sp-bar-gap:             4px;
	--sp-sidebar-bar-width:   24px;

	/* ===========================
	   Übergänge (Transitions)
	   =========================== */
	--sp-transition-fast:     150ms ease;
	--sp-transition-base:     250ms ease;
	--sp-transition-slow:     400ms ease;

	/* ===========================
	   Z-Index Skala
	   =========================== */
	--sp-z-base:              1;
	--sp-z-panel:             10;
	--sp-z-dropdown:          100;
	--sp-z-sticky:            200;
	--sp-z-overlay:           500;
	--sp-z-modal:             1000;

	/* ===========================
	   Layout — Breiten
	   =========================== */
	--sp-width-content:       1400px;
	--sp-width-wide:          1800px;
	--sp-width-full:          2000px;
	--sp-width-sidebar:       400px;

	/* ===========================
	   Breakpoints (als Referenz)
	   =========================== */
	--sp-bp-sm:               640px;
	--sp-bp-md:               768px;
	--sp-bp-lg:               1024px;
	--sp-bp-xl:               1280px;
}