/* =====================================================================
   CMS Simple LHK — Design Tokens
   Variables CSS pour les modes clair et sombre.
   Palette SaaS 2026 — HSL harmonisée.
   ===================================================================== */

:root,
[data-theme="light"] {
    /* ── Brand ────────────────────────────────────────────────────── */
    --color-primary:       hsl(217, 91%, 60%);
    --color-primary-hover: hsl(217, 91%, 50%);
    --color-primary-light: hsl(217, 91%, 95%);
    --color-primary-dark:  hsl(217, 91%, 40%);

    --color-accent:        hsl(199, 89%, 48%);
    --color-accent-hover:  hsl(199, 89%, 38%);

    /* ── Semantic ─────────────────────────────────────────────────── */
    --color-success:       hsl(142, 71%, 45%);
    --color-success-light: hsl(142, 71%, 92%);
    --color-warning:       hsl(38, 92%, 50%);
    --color-warning-light: hsl(38, 92%, 92%);
    --color-danger:        hsl(0, 84%, 60%);
    --color-danger-light:  hsl(0, 84%, 95%);
    --color-info:          hsl(199, 89%, 48%);
    --color-info-light:    hsl(199, 89%, 92%);

    /* ── Surfaces ─────────────────────────────────────────────────── */
    --bg-body:             hsl(220, 14%, 96%);
    --bg-surface:          hsl(0, 0%, 100%);
    --bg-surface-hover:    hsl(220, 14%, 97%);
    --bg-surface-raised:   hsl(0, 0%, 100%);
    --bg-sidebar:          hsl(222, 47%, 11%);
    --bg-sidebar-hover:    hsl(222, 47%, 16%);
    --bg-header:           hsl(0, 0%, 100%);
    --bg-input:            hsl(0, 0%, 100%);
    --bg-code:             hsl(220, 14%, 96%);

    /* ── Texte ────────────────────────────────────────────────────── */
    --text-primary:        hsl(222, 47%, 11%);
    --text-secondary:      hsl(215, 16%, 47%);
    --text-muted:          hsl(215, 16%, 62%);
    --text-inverse:        hsl(0, 0%, 100%);
    --text-sidebar:        hsl(214, 32%, 91%);
    --text-sidebar-muted:  hsl(215, 16%, 65%);

    /* ── Bordures ─────────────────────────────────────────────────── */
    --border-default:      hsl(220, 13%, 91%);
    --border-hover:        hsl(215, 16%, 80%);
    --border-focus:        var(--color-primary);
    --border-input:        hsl(220, 13%, 87%);

    /* ── Ombres ───────────────────────────────────────────────────── */
    --shadow-sm:           0 1px 2px hsla(0, 0%, 0%, 0.05);
    --shadow-md:           0 4px 6px -1px hsla(0, 0%, 0%, 0.07), 0 2px 4px -2px hsla(0, 0%, 0%, 0.05);
    --shadow-lg:           0 10px 15px -3px hsla(0, 0%, 0%, 0.08), 0 4px 6px -4px hsla(0, 0%, 0%, 0.04);
    --shadow-xl:           0 20px 25px -5px hsla(0, 0%, 0%, 0.1), 0 8px 10px -6px hsla(0, 0%, 0%, 0.04);

    /* ── Arrondis ─────────────────────────────────────────────────── */
    --radius-sm:           0.375rem;
    --radius-md:           0.5rem;
    --radius-lg:           0.75rem;
    --radius-xl:           1rem;
    --radius-full:         9999px;

    /* ── Espacement ───────────────────────────────────────────────── */
    --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;

    /* ── Typographie ──────────────────────────────────────────────── */
    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 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;

    /* ── Layout ───────────────────────────────────────────────────── */
    --sidebar-width:       260px;
    --sidebar-collapsed:   70px;
    --header-height:       64px;
    --transition-base:     0.2s ease;
    --transition-smooth:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ Dark Mode ══════════════════════════════════════════════════════ */

[data-theme="dark"] {
    --bg-body:             hsl(222, 47%, 8%);
    --bg-surface:          hsl(222, 47%, 11%);
    --bg-surface-hover:    hsl(222, 47%, 14%);
    --bg-surface-raised:   hsl(222, 47%, 13%);
    --bg-sidebar:          hsl(222, 47%, 6%);
    --bg-sidebar-hover:    hsl(222, 47%, 10%);
    --bg-header:           hsl(222, 47%, 11%);
    --bg-input:            hsl(222, 47%, 14%);
    --bg-code:             hsl(222, 47%, 14%);

    --text-primary:        hsl(214, 32%, 91%);
    --text-secondary:      hsl(215, 16%, 65%);
    --text-muted:          hsl(215, 16%, 50%);
    --text-sidebar:        hsl(214, 32%, 91%);
    --text-sidebar-muted:  hsl(215, 16%, 50%);

    --border-default:      hsl(222, 47%, 18%);
    --border-hover:        hsl(222, 47%, 25%);
    --border-input:        hsl(222, 47%, 20%);

    --shadow-sm:           0 1px 2px hsla(0, 0%, 0%, 0.2);
    --shadow-md:           0 4px 6px -1px hsla(0, 0%, 0%, 0.25), 0 2px 4px -2px hsla(0, 0%, 0%, 0.2);
    --shadow-lg:           0 10px 15px -3px hsla(0, 0%, 0%, 0.3), 0 4px 6px -4px hsla(0, 0%, 0%, 0.2);
    --shadow-xl:           0 20px 25px -5px hsla(0, 0%, 0%, 0.4), 0 8px 10px -6px hsla(0, 0%, 0%, 0.2);

    --color-primary-light: hsl(217, 91%, 15%);
    --color-success-light: hsl(142, 71%, 12%);
    --color-warning-light: hsl(38, 92%, 12%);
    --color-danger-light:  hsl(0, 84%, 12%);
    --color-info-light:    hsl(199, 89%, 12%);
}