:root {
  /* ═══════════════════════════════
     🎨 PALETTE SPOILME
  ═══════════════════════════════ */
  --color-bordeaux:     #542333;
  --color-mauve:        #BE8191;
  --color-rose-moyen:   #D7AAA9;
  --color-blush:        #D2A2B1;
  --color-creme:        #F8DFDA;

  /* ═══════════════════════════════
     🌙 DARK MODE (défaut)
  ═══════════════════════════════ */
  --bg-primary:         #1a0d11;
  --bg-secondary:       #2a1520;
  --bg-card:            #331a22;
  --bg-hover:           #3d2029;
  --bg-input:           #241018;

  --text-primary:       #F8DFDA;
  --text-secondary:     #D2A2B1;
  --text-muted:         #BE8191;
  --text-inverse:       #1a0d11;

  --border-color:       rgba(190, 129, 145, 0.2);
  --border-active:      rgba(84, 35, 51, 0.8);

  --accent-primary:     #542333;
  --accent-hover:       #6e2d42;
  --accent-light:       #BE8191;
  --accent-glow:        rgba(84, 35, 51, 0.4);

  /* ═══════════════════════════════
     📐 ESPACEMENTS
  ═══════════════════════════════ */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-2xl:   48px;
  --space-3xl:   64px;

  /* ═══════════════════════════════
     🔠 TYPOGRAPHIE
  ═══════════════════════════════ */
  --font-sans:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', 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;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ═══════════════════════════════
     🔲 BORDURES & RADIUS
  ═══════════════════════════════ */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ═══════════════════════════════
     🌫️ OMBRES
  ═══════════════════════════════ */
  --shadow-sm:   0 1px 3px rgba(84, 35, 51, 0.2);
  --shadow-md:   0 4px 16px rgba(84, 35, 51, 0.3);
  --shadow-lg:   0 8px 32px rgba(84, 35, 51, 0.4);
  --shadow-glow: 0 0 24px rgba(84, 35, 51, 0.5);

  /* ═══════════════════════════════
     ⚡ TRANSITIONS
  ═══════════════════════════════ */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══════════════════════════════
     📱 BREAKPOINTS (ref JS)
  ═══════════════════════════════ */
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl:  1200px;
  --bp-2xl: 1400px;

  /* ═══════════════════════════════
     📏 LAYOUT
  ═══════════════════════════════ */
  --navbar-height:    64px;
  --sidebar-width:    280px;
  --feed-max-width:   680px;
  --content-max:      1200px;
}

/* ═══════════════════════════════
   ☀️ LIGHT MODE
═══════════════════════════════ */
[data-theme="light"] {
  --bg-primary:       #fdf6f4;
  --bg-secondary:     #f5e8e5;
  --bg-card:          #ffffff;
  --bg-hover:         #f0ddd9;
  --bg-input:         #fff8f6;

  --text-primary:     #2a1015;
  --text-secondary:   #542333;
  --text-muted:       #BE8191;
  --text-inverse:     #F8DFDA;

  --border-color:     rgba(84, 35, 51, 0.15);
  --border-active:    rgba(84, 35, 51, 0.5);

  --shadow-sm:        0 1px 3px rgba(84, 35, 51, 0.1);
  --shadow-md:        0 4px 16px rgba(84, 35, 51, 0.15);
  --shadow-lg:        0 8px 32px rgba(84, 35, 51, 0.2);
}

/* ═══════════════════════════════
   🌊 OCEAN MODE
   Palette : #F0F0F0 · #8496BD · #516587 · #07343C · #1D1B1B
═══════════════════════════════ */
[data-theme="ocean"] {
  --bg-primary:       #07343C;
  --bg-secondary:     #0a3f4a;
  --bg-card:          #0e4b58;
  --bg-hover:         #155d6e;
  --bg-input:         #062c33;

  --text-primary:     #F0F0F0;
  --text-secondary:   #c5d3e0;
  --text-muted:       #8496BD;
  --text-inverse:     #07343C;

  --border-color:     rgba(132, 150, 189, 0.2);
  --border-active:    rgba(81, 101, 135, 0.6);

  --accent-primary:   #516587;
  --accent-hover:     #617899;
  --accent-light:     #8496BD;
  --accent-glow:      rgba(81, 101, 135, 0.4);

  --color-bordeaux:   #516587;
  --color-mauve:      #8496BD;
  --color-rose-moyen: #8496BD;
  --color-blush:      #8496BD;
  --color-creme:      #F0F0F0;

  --shadow-sm:        0 1px 3px rgba(7, 52, 60, 0.4);
  --shadow-md:        0 4px 16px rgba(7, 52, 60, 0.5);
  --shadow-lg:        0 8px 32px rgba(7, 52, 60, 0.6);
  --shadow-glow:      0 0 24px rgba(81, 101, 135, 0.4);
}