/* theme.css — Design System Unifié : Le Moteur et Le Signal (v5.5)
   Improved Agency × Sabi — sans rouge */

:root {
  /* ─── Brand Colors (neutre + accent fonctionnel) ───────────── */
  --brand-green:      #27A879;
  --brand-green-dark: #1D8D66;
  --brand-green-rgb:  39, 168, 121;
  --brand-yellow:     #F5B91B;
  --brand-yellow-rgb: 245, 185, 27;
  --brand-yellow-text:#785400;
  --gold:     var(--brand-yellow);
  --gold-2:   #F9CD4A;
  --gold-dim:  rgba(245, 185, 27, 0.14);
  --gold-glow: rgba(245, 185, 27, 0.22);
  --brand:     var(--brand-green);

  /* ─── Semantic Colors ────────────────────────────────────── */
  --success:       #16A34A;
  --success-bg:    rgba(22, 163, 74, 0.12);
  --danger:        #DC2626;
  --danger-bg:     rgba(220, 38, 38, 0.10);
  --warning:       #D97706;
  --warning-bg:    rgba(217, 119, 6, 0.10);
  --info:          #2563EB;
  --info-bg:       rgba(37, 99, 235, 0.08);

  /* ─── LIGHT MODE — High-Contrast Accessible / Premium ──────── */
  --bg:      #F8FAFC;
  --bg-2:    #FFFFFF;
  --bg-3:    #F1F5F9;
  --bg-4:    #E2E8F0;
  --bg-surface: #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --glass:      rgba(255, 255, 255, 0.94);
  --glass-border: rgba(15, 23, 42, 0.08);

  --border:   #E2E8F0;
  --border-2: #CBD5E1;
  --border-3: #94A3B8;

  /* Strict WCAG AA/AAA compliance: dark, crystal clear readability */
  --text:   #0F172A; /* 16.5:1 contrast */
  --text-2: #1E293B; /* 13.5:1 contrast */
  --text-3: #475569; /* 5.8:1 contrast (passes WCAG AA) */
  --text-4: #64748B; /* 4.6:1 contrast (passes WCAG AA) */
  --text-muted: #475569;
  --focus-ring: #1D8D66;
  --text-on-brand: #FFFFFF;
  --text-on-gold:  #0F172A;

  --nav-bg:   #FFFFFF;
  --sheet-bg: #FFFFFF;
  --input-bg:     #FFFFFF;
  --input-border: #CBD5E1;

  --shadow:    0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
  --shadow-brand: 0 8px 22px rgba(39, 168, 121, 0.20);
  --shadow-gold:  0 8px 22px rgba(245, 185, 27, 0.20);
  --shadow-offset: 4px 4px 0 #0F172A;

  /* ─── Gradients ──────────────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #27A879 0%, #1D8D66 100%);
  --gradient-gold:  linear-gradient(135deg, #F5B91B 0%, #E0A60E 100%);
  --gradient-bg:    linear-gradient(160deg, #F8FAFC 0%, #F1F5F9 100%);
  --gradient-card:  linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);

  /* ─── Typography Scale ───────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;
  --font-heading: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --line-body: 1.5;
  --line-heading: 1.2;
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-semibold: 700;
  --weight-bold: 800;

  /* ─── Spacing / Radius / Motion / Shell ─────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --sidebar-w: 260px;
  --tabbar-h: calc(64px + env(safe-area-inset-bottom, 0px));
  --sabi-bar-h: 56px;
  --tribal-url: url('../assets/images/tribal-bg.jpg');

  /* ─── Tech Grid Pattern (radial 24px) ───────────────────── */
  --grid-pattern: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  --grid-size: 24px;
}

/* ─── DARK MODE — Tech Deep (Le Moteur) ───────────────────── */
[data-theme="dark"] {
  --bg:      #121516;
  --bg-2:    #1A1E1F;
  --bg-3:    #202628;
  --bg-4:    #2A3032;
  --bg-surface: #161A1C;
  --surface:    rgba(26, 30, 31, 0.92);
  --surface-2:  rgba(20, 22, 23, 0.82);
  --glass:      rgba(26, 30, 31, 0.88);
  --glass-border: rgba(255, 255, 255, 0.06);

  --border:   rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.12);
  --border-3: rgba(255, 255, 255, 0.18);

  --text:   #F8FAFC;
  --text-2: #E2E8F0;
  --text-3: #94A3B8;
  --text-4: #64748B;
  --text-muted: #94A3B8;
  --focus-ring: #45C995;
  --text-on-brand: #FFFFFF;
  --text-on-gold:  #1D1C18;
  --brand-yellow-text: #F7CF5D;

  --nav-bg:   rgba(18, 21, 22, 0.94);
  --sheet-bg: rgba(26, 30, 31, 0.98);
  --input-bg: rgba(255,255,255,0.03);
  --input-border: rgba(255,255,255,0.12);

  --shadow:    0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.60);
  --shadow-brand: 0 8px 22px rgba(39, 168, 121, 0.22);
  --shadow-gold:  0 8px 22px rgba(245, 185, 27, 0.18);
  --shadow-offset: 4px 4px 0 #F8FAFC;

  --gradient-brand: linear-gradient(135deg, #27A879 0%, #1D8D66 100%);
  --gradient-gold:  linear-gradient(135deg, #F5B91B 0%, #E0A60E 100%);
  --gradient-bg:    linear-gradient(160deg, #121516 0%, #171D1D 100%);
  --gradient-card:  linear-gradient(145deg, rgba(26,30,31,0.95) 0%, rgba(18,21,22,0.78) 100%);

  --grid-pattern: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
}