/* ============================================================
   KirinVerse – Design Tokens / CSS Custom Properties
   ============================================================ */

:root {
    /* --- Farben: Dark Theme (Standard) --- */
    --color-bg:           #0d0d1a;
    --color-bg-alt:       #13132b;
    --color-bg-card:      #1a1a35;
    --color-bg-elevated:  #22224a;
    --color-surface:      #2a2a5a;

    --color-primary:      #7c3aed;
    --color-primary-light:#a78bfa;
    --color-primary-dark: #5b21b6;
    --color-primary-glow: rgba(124, 58, 237, 0.35);

    --color-accent:       #f59e0b;
    --color-accent-light: #fcd34d;
    --color-accent-dark:  #d97706;

    --color-text:         #e2e8f0;
    --color-text-muted:   #94a3b8;
    --color-text-subtle:  #64748b;
    --color-text-heading: #f1f5f9;

    --color-border:       rgba(124, 58, 237, 0.2);
    --color-border-subtle:rgba(255, 255, 255, 0.07);

    --color-success:      #10b981;
    --color-warning:      #f59e0b;
    --color-error:        #ef4444;
    --color-info:         #3b82f6;

    /* --- Farben: Light Theme --- */
    --color-bg-light:           #fafaf8;
    --color-bg-alt-light:       #f3f0ff;
    --color-bg-card-light:      #ffffff;
    --color-bg-elevated-light:  #ede9fe;
    --color-text-light:         #1a1625;
    --color-text-muted-light:   #3d2c5c;
    --color-text-subtle-light:  #6d5a7a;
    --color-border-light:       rgba(124, 58, 237, 0.25);

    /* --- Typografie --- */
    --font-heading:  'Cinzel', 'Georgia', serif;
    --font-body:     'Lato', 'Helvetica Neue', sans-serif;
    --font-reading:  'Merriweather', 'Georgia', serif;
    --font-mono:     'Courier New', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    --weight-light:   300;
    --weight-regular: 400;
    --weight-bold:    700;

    /* --- Abstände --- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* --- Radien --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* --- Schatten --- */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow:0 0 30px var(--color-primary-glow);
    --shadow-card:0 4px 24px rgba(0,0,0,0.35);

    /* --- Übergänge --- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Layout --- */
    --container-max:  1200px;
    --container-wide: 1400px;
    --navbar-height:  70px;

    /* --- Z-Ebenen --- */
    --z-base:    1;
    --z-dropdown:100;
    --z-sticky:  200;
    --z-overlay: 300;
    --z-modal:   400;
    --z-toast:   500;
}

/* Light Theme Override */
[data-theme="light"] {
    --color-bg:           var(--color-bg-light);
    --color-bg-alt:       var(--color-bg-alt-light);
    --color-bg-card:      var(--color-bg-card-light);
    --color-bg-elevated:  var(--color-bg-elevated-light);
    --color-surface:      #e9dff7;
    --color-text:         var(--color-text-light);
    --color-text-muted:   var(--color-text-muted-light);
    --color-text-subtle:  var(--color-text-subtle-light);
    --color-text-heading: #0f0a1a;
    --color-border:       var(--color-border-light);
    --color-border-subtle:rgba(0,0,0,0.1);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
    --shadow-card:0 4px 24px rgba(0,0,0,0.06);
}