/*
 * variables.css — Chronique des Mondes
 * Design System — Fluent UI Blazor + Custom Theming
 */

:root {
  /* ============================================
     PALETTE — Couleurs statiques
     ============================================ */
  --color-indigo-950: #1e1b4b;
  --color-indigo-900: #312e81;
  --color-indigo-800: #3730a3;
  --color-indigo-700: #4338ca;
  --color-indigo-600: #4f46e5;
  --color-indigo-500: #6366f1;
  --color-indigo-400: #818cf8;
  --color-indigo-300: #a5b4fc;
  --color-indigo-200: #c7d2fe;
  --color-indigo-100: #e0e7ff;

  --color-violet-700: #6d28d9;
  --color-violet-600: #7c3aed;
  --color-violet-500: #8b5cf6;
  --color-violet-400: #a78bfa;
  --color-violet-300: #c4b5fd;

  --color-rose-700:  #be123c;
  --color-rose-600:  #e11d48;
  --color-rose-500:  #f43f5e;
  --color-rose-400:  #fb7185;
  --color-rose-300:  #fda4af;

  /* Status */
  --color-success: #22c55e;
  --color-warning: #d97706;
  --color-error:   #ef4444;
  --color-danger:  #ef4444;
  --color-info:    #3b82f6;

  /* ============================================
     TYPOGRAPHIE
     ============================================ */
  --font-heading: 'Cinzel', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --font-size-display: 3.5rem;
  --font-size-h1:      2.5rem;
  --font-size-h2:      2rem;
  --font-size-h3:      1.75rem;
  --font-size-h4:      1.5rem;
  --font-size-h5:      1.25rem;
  --font-size-base:    1rem;
  --font-size-sm:      0.875rem;
  --font-size-xs:      0.75rem;

  /* ============================================
     ESPACEMENTS
     ============================================ */
  --spacing-xs:  0.25rem;
  --spacing-sm:  0.5rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2rem;
  --spacing-2xl: 3rem;

  /* ============================================
     RAYONS
     ============================================ */
  /* Refonte « rectangulaire » : rayons resserrés, angles nets (maquette). */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-full: 9999px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Z-INDEX
     ============================================ */
  --z-topbar:    1020;
  --z-sidebar:   1030;
  /* Menus déroulants (notifications, avatar) : au-dessus du contenu de la topbar.
     Le backdrop de fermeture reste volontairement sous la topbar (voir layout-shell.css). */
  --z-dropdown:  1040;
  --z-modal:     1050;
  --z-toast:     1070;
  --z-tooltip:   1080;

  /* ============================================
     LAYOUT
     ============================================ */
  --sidebar-width:            260px;
  --sidebar-collapsed-width:  72px;
  --secondary-sidebar-width:  240px;
  --topbar-height:            56px;

  /* ============================================
     SEMANTIC — Mode sombre (défaut)
     Refonte « codex premium » : fonds bleu-graphite profonds,
     bordures neutres (plus d'indigo), accent par défaut = ambre.
     ============================================ */
  --color-bg-primary:   #070a0d;
  --color-bg-secondary: #0e131b;
  --color-bg-elevated:  #12151d;
  --color-bg-card:      #0e131b;
  --color-bg-input:     #0a0f16;
  --color-bg-tertiary:  #161b26;

  /* Surface aliases (used by dropdowns, panels, notifications) */
  --color-surface:           var(--color-bg-card);
  --color-surface-primary:   var(--color-bg-card);
  --color-surface-secondary: var(--color-bg-elevated);
  --color-surface-alt:       var(--color-bg-secondary);

  --color-text-primary:   #e9ebf1;
  --color-text-secondary: #b7bccb;
  --color-text-muted:     #8b93a3;
  --color-text-disabled:  #666d7e;

  --color-border:         rgba(200, 210, 232, 0.10);
  --color-border-hover:   rgba(200, 210, 232, 0.20);
  --color-border-focus:   #d69f52;

  /* Accent par défaut (thème « générique ») : ambre chaleureux, jamais l'indigo « IA ». */
  --color-primary:        #d69f52;
  --color-primary-hover:  #e2ad63;
  --color-primary-light:  #ecc386;
  --color-secondary:      #9a5a2b;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.28);
  --shadow-md:  0 6px 18px -8px rgba(0,0,0,0.5);
  --shadow-lg:  0 20px 48px -20px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 3px rgba(214, 159, 82, 0.4);

  --gradient-primary: linear-gradient(135deg, #d69f52 0%, #9a5a2b 100%);
}

/* ============================================
   MODE CLAIR
   ============================================ */
[data-theme="light"] {
  /* Mode clair « parchemin chaud » — accueillant, jamais le blanc bleuté générique. */
  --color-bg-primary:   #e4ddce;
  --color-bg-secondary: #eee7d9;
  --color-bg-elevated:  #fbf7ee;
  --color-bg-card:      #f8f3ea;
  --color-bg-input:     #e9e2d3;
  --color-bg-tertiary:  #ded5c3;

  /* Surface aliases */
  --color-surface:           var(--color-bg-card);
  --color-surface-primary:   var(--color-bg-card);
  --color-surface-secondary: var(--color-bg-elevated);
  --color-surface-alt:       var(--color-bg-secondary);

  --color-text-primary:   #1b1c22;
  --color-text-secondary: #545864;
  --color-text-muted:     #878b98;
  --color-text-disabled:  #a9adb8;

  --color-border:         rgba(30, 26, 18, 0.14);
  --color-border-hover:   rgba(30, 26, 18, 0.24);
  --color-border-focus:   #a86f28;

  /* Accent générique assombri pour rester lisible sur le fond clair. */
  --color-primary:        #a86f28;
  --color-primary-hover:  #935f22;
  --color-primary-light:  #b5813a;

  --shadow-sm:  0 1px 3px rgba(40,32,20,0.08);
  --shadow-md:  0 6px 18px -8px rgba(40,32,20,0.18);
  --shadow-lg:  0 20px 45px -22px rgba(40,32,20,0.28);
}