/**
 * RSO Turnkey Sales – Design Tokens
 *
 * Einzige Quelle der Wahrheit für alle Farben, Schatten, Abstände und
 * Typografie-Werte im gesamten Plugin (öffentlich + Admin).
 * Diese Datei wird als ERSTE CSS-Datei geladen.
 *
 * Voltera-Brand: Sky-Blue #0ea5e9 / Emerald #10b981 / Dark #1e293b
 *
 * @package RSO_Turnkey_Sales
 */

:root {

    /* ── Primärfarbe (Voltera Sky-Blue) ─────────────────── */
    --rso-primary:          #0ea5e9;
    --rso-primary-hover:    #0284c7;
    --rso-primary-light:    #e0f2fe;
    --rso-primary-dark:     #0369a1;

    /* ── Sekundärfarbe (Emerald / Erfolg) ───────────────── */
    --rso-secondary:        #10b981;
    --rso-secondary-hover:  #059669;
    --rso-secondary-light:  #d1fae5;

    /* ── Akzent / Warnung (Amber) ───────────────────────── */
    --rso-accent:           #f59e0b;
    --rso-accent-hover:     #d97706;
    --rso-accent-light:     #fef3c7;

    /* ── Dunkel (Text / Header) ─────────────────────────── */
    --rso-dark:             #1e293b;

    /* ── Status ─────────────────────────────────────────── */
    --rso-success:          #10b981;
    --rso-success-light:    #d1fae5;
    --rso-warning:          #f59e0b;
    --rso-warning-light:    #fef3c7;
    --rso-danger:           #ef4444;
    --rso-danger-light:     #fee2e2;
    --rso-info:             #0ea5e9;
    --rso-info-light:       #e0f2fe;

    /* ── Graustufen (vollständig, Tailwind Slate) ───────── */
    --rso-gray-50:          #f8fafc;
    --rso-gray-100:         #f1f5f9;
    --rso-gray-200:         #e2e8f0;
    --rso-gray-300:         #cbd5e1;
    --rso-gray-400:         #94a3b8;
    --rso-gray-500:         #64748b;
    --rso-gray-600:         #475569;
    --rso-gray-700:         #334155;
    --rso-gray-800:         #1e293b;
    --rso-gray-900:         #0f172a;

    /* ── Gradient (Brand) ───────────────────────────────── */
    --rso-gradient:         linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    --rso-gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --rso-gradient-warm:    linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);

    /* ── Schatten (3 Stufen + Brand-Tinted) ─────────────── */
    --rso-shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.08);
    --rso-shadow:           0 4px 20px rgba(0, 0, 0, 0.10);
    --rso-shadow-lg:        0 10px 40px rgba(0, 0, 0, 0.12);
    --rso-shadow-primary:   0 8px 24px rgba(14, 165, 233, 0.25);
    --rso-shadow-success:   0 8px 24px rgba(16, 185, 129, 0.25);

    /* ── Border Radius (6 Stufen + Pill) ────────────────── */
    --rso-radius-xs:        4px;
    --rso-radius-sm:        8px;
    --rso-radius:           12px;
    --rso-radius-lg:        16px;
    --rso-radius-xl:        24px;
    --rso-radius-pill:      999px;

    /* ── Typografie-Grössen ─────────────────────────────── */
    --rso-text-xs:          11px;
    --rso-text-sm:          13px;
    --rso-text-base:        14px;
    --rso-text-md:          16px;
    --rso-text-lg:          18px;
    --rso-text-xl:          22px;
    --rso-text-2xl:         28px;
    --rso-text-3xl:         36px;

    /* ── Übergänge ──────────────────────────────────────── */
    --rso-transition:       0.2s ease;
    --rso-transition-slow:  0.3s ease;
    --rso-transition-fast:  0.1s ease;

    /* ── Border ─────────────────────────────────────────── */
    --rso-border:           rgba(15, 23, 42, 0.10);
    --rso-border-strong:    rgba(15, 23, 42, 0.20);
}