/* ===========================================
   Design Tokens — Soelya Dark Theme
   =========================================== */

:root {
    /* ---- Couleurs de base ---- */
    --color-bg-primary:    #0a0a0f;
    --color-bg-secondary:  #12121a;
    --color-bg-tertiary:   #1a1a26;
    --color-bg-elevated:   #1e1e2e;

    /* ---- Surfaces & Cards ---- */
    --color-surface:       #16161f;
    --color-surface-hover: #1c1c2a;
    --color-surface-active:#222233;
    --color-border:        rgba(255, 255, 255, 0.06);
    --color-border-hover:  rgba(255, 255, 255, 0.12);

    /* ---- Texte ---- */
    --color-text-primary:   #e8e8ed;
    --color-text-secondary: #9898a8;
    --color-text-tertiary:  #5c5c72;
    --color-text-inverse:   #0a0a0f;

    /* ---- Accent (violet/bleu Soelya) ---- */
    --color-accent:         #7c5cfc;
    --color-accent-hover:   #9078ff;
    --color-accent-subtle:  rgba(124, 92, 252, 0.12);
    --color-accent-glow:    rgba(124, 92, 252, 0.25);

    /* ---- Feedback ---- */
    --color-success:  #34d399;
    --color-warning:  #fbbf24;
    --color-error:    #f87171;

    /* ---- Typographie ---- */
    --font-family:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:    0.75rem;   /* 12px */
    --font-size-sm:    0.875rem;  /* 14px */
    --font-size-base:  1rem;      /* 16px */
    --font-size-md:    1.125rem;  /* 18px */
    --font-size-lg:    1.25rem;   /* 20px */
    --font-size-xl:    1.5rem;    /* 24px */
    --font-size-2xl:   2rem;      /* 32px */
    --font-size-3xl:   2.5rem;    /* 40px */
    --font-size-4xl:   3rem;      /* 48px */

    /* ---- Espacements ---- */
    --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;

    /* ---- Rayons ---- */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* ---- Ombres ---- */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--color-accent-glow);

    /* ---- Transitions ---- */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* ---- Layout ---- */
    --max-width:       1200px;
    --header-height:   64px;
}