/* ==========================================================
   theme.css — Variables & tokens de design
   Palette : Teal pastel + Orange doux + Blanc cassé
   ========================================================== */

:root {
    /* ── Couleurs principales ── */
    --teal-50:  #f0faf8;
    --teal-100: #d0f0ea;
    --teal-200: #a3e0d4;
    --teal-300: #6bc9b8;
    --teal-400: #3aae9a;
    --teal-500: #1f9282;
    --teal-600: #12756a;
    --teal-700: #0d5c54;
    --teal-800: #0a4540;
    --teal-900: #062e2a;

    --orange-50:  #fff7f0;
    --orange-100: #ffe8d0;
    --orange-200: #ffcfa0;
    --orange-300: #ffae6a;
    --orange-400: #f98b38;
    --orange-500: #e96d10;
    --orange-600: #c4540a;
    --orange-700: #9a3f08;
    --orange-800: #732f06;
    --orange-900: #4d1f04;

    --neutral-50:  #fafaf8;
    --neutral-100: #f3f2ef;
    --neutral-200: #e5e4df;
    --neutral-300: #d1cfc8;
    --neutral-400: #b0ada4;
    --neutral-500: #8c8980;
    --neutral-600: #6b6860;
    --neutral-700: #4f4d47;
    --neutral-800: #36342f;
    --neutral-900: #1e1d1a;

    /* ── Sémantique ── */
    --color-primary:        var(--teal-500);
    --color-primary-light:  var(--teal-100);
    --color-primary-dark:   var(--teal-700);
    --color-accent:         var(--orange-400);
    --color-accent-light:   var(--orange-100);
    --color-accent-dark:    var(--orange-600);

    --color-bg:             var(--neutral-50);
    --color-bg-card:        #ffffff;
    --color-bg-sidebar:     var(--teal-800);
    --color-sidebar-text:   var(--teal-100);
    --color-sidebar-muted:  var(--teal-300);
    --color-sidebar-active: var(--teal-400);

    --color-text:           var(--neutral-800);
    --color-text-muted:     var(--neutral-500);
    --color-text-light:     var(--neutral-400);
    --color-border:         var(--neutral-200);
    --color-border-focus:   var(--teal-300);

    --color-success:        #2ecc8a;
    --color-success-bg:     #edfaf4;
    --color-warning:        #f5a623;
    --color-warning-bg:     #fff9ee;
    --color-danger:         #e05252;
    --color-danger-bg:      #fff0f0;
    --color-info:           var(--teal-400);
    --color-info-bg:        var(--teal-50);

    /* ── Typographie ── */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'Fira Code', 'Courier New', monospace;

    --text-xs:   0.72rem;
    --text-sm:   0.85rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.35rem;
    --text-2xl:  1.65rem;
    --text-3xl:  2.1rem;

    /* ── Géométrie ── */
    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-pill: 999px;

    /* ── Ombres ── */
    --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 4px 18px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

    /* ── Layout ── */
    --sidebar-w: 248px;
    --topbar-h:  56px;
    --content-max: 1140px;
    --transition: .22s cubic-bezier(.4,0,.2,1);
}