/* ============================================
   THEME.CSS — Variables globales bleu nuit / or / blanc
   Modifier les couleurs ICI uniquement
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Couleurs principales */
  --navy-900: #060D1A;
  --navy-800: #0A1628;
  --navy-700: #0F2040;
  --navy-600: #162B55;
  --navy-500: #1E3A6E;
  --navy-400: #2A4F8A;
  --navy-300: #3D6BA8;

  /* ── Or */
  --gold-500: #C9A84C;
  --gold-400: #D4B96A;
  --gold-300: #E2CE96;
  --gold-200: #EFE4BE;
  --gold-100: #FAF5E8;

  /* ── Blanc / Gris */
  --white:    #FFFFFF;
  --gray-100: #F4F6FA;
  --gray-200: #E8ECF4;
  --gray-300: #CBD2E0;
  --gray-400: #9BA6BE;
  --gray-500: #6B7A99;
  --gray-600: #4A5568;
  --gray-700: #2D3748;

  /* ── Sémantiques */
  --bg-app:       var(--navy-900);
  --bg-sidebar:   var(--navy-800);
  --bg-surface:   var(--navy-700);
  --bg-card:      var(--navy-600);
  --bg-input:     var(--navy-500);
  --border:       rgba(201, 168, 76, 0.15);
  --border-hover: rgba(201, 168, 76, 0.4);
  --text-primary: var(--white);
  --text-secondary: var(--gray-300);
  --text-muted:   var(--gray-500);
  --accent:       var(--gold-500);
  --accent-light: var(--gold-300);
  --accent-glow:  rgba(201, 168, 76, 0.2);

  /* ── Statuts */
  --success: #4CAF85;
  --warning: #E8A64C;
  --error:   #E05C5C;
  --info:    #5C9BE0;

  /* ── Highlights fluo */
  --hl-yellow: rgba(255, 245, 100, 0.35);
  --hl-orange: rgba(255, 160, 60,  0.35);
  --hl-green:  rgba(80,  220, 140, 0.35);
  --hl-blue:   rgba(80,  170, 255, 0.35);
  --hl-pink:   rgba(255, 130, 180, 0.35);

  /* ── Typographie */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Espacements */
  --sidebar-width: 260px;
  --header-height: 64px;

  /* ── Ombres */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.5);
  --shadow-gold: 0 0 20px rgba(201, 168, 76, 0.15);

  /* ── Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}