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

:root {
  /* ─── Brand Colors (Le Moteur) ─────────────────────────── */
  --brand-green:      #00845F;
  --brand-green-dark: #006D4E;
  --brand-green-rgb:  0, 132, 95;
  --brand-yellow:     #F9D043;
  --brand-yellow-rgb: 249, 208, 67;
  --brand-yellow-text:#B48500;
  --gold:     var(--brand-yellow);
  --gold-2:   #FFDE59;
  --gold-dim:  rgba(249, 208, 67, 0.12);
  --gold-glow: rgba(249, 208, 67, 0.28);
  --brand:     var(--brand-green);

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

  /* ─── LIGHT MODE — Frost (Le Signal) ─────────────────────── */
  --bg:      #F9F9FE;
  --bg-2:    #FFFFFF;
  --bg-3:    #F4F4FA;
  --bg-4:    #ECEDF2;
  --surface:    rgba(255, 255, 255, 0.90);
  --surface-2:  rgba(255, 255, 255, 0.60);
  --glass:      rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.92);

  --border:   rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.10);
  --border-3: rgba(0, 0, 0, 0.16);

  --text:   #12141A;
  --text-2: #2D3039;
  --text-3: #5C6070;
  --text-4: #8B8FA0;
  --text-on-brand: #FFFFFF;
  --text-on-gold:  #12141A;

  --nav-bg:   rgba(249, 249, 254, 0.92);
  --sheet-bg: rgba(255, 255, 255, 0.98);
  --input-bg:     rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.08);

  --shadow:    0 8px 32px rgba(18, 20, 26, 0.08);
  --shadow-sm: 0 2px 12px rgba(18, 20, 26, 0.05);
  --shadow-lg: 0 20px 60px rgba(18, 20, 26, 0.12);
  --shadow-brand: 0 4px 20px rgba(0, 132, 95, 0.25);
  --shadow-gold:  0 4px 20px rgba(249, 208, 67, 0.30);
  --shadow-offset: 4px 4px 0 #12141A;

  /* ─── Gradients ──────────────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #00845F 0%, #006D4E 100%);
  --gradient-gold:  linear-gradient(135deg, #F9D043 0%, #E8BF20 100%);
  --gradient-bg:    linear-gradient(160deg, #F9F9FE 0%, #F4F4FA 100%);
  --gradient-card:  linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(244,244,250,0.7) 100%);

  /* ─── Typography Scale ───────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-heading: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ─── 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: 20px;
  --radius-xl: 24px;
  --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:      #0A0A0A;
  --bg-2:    #141416;
  --bg-3:    #1C1C1F;
  --bg-4:    #26262A;
  --surface:    rgba(20, 20, 22, 0.90);
  --surface-2:  rgba(14, 14, 16, 0.72);
  --glass:      rgba(20, 20, 22, 0.85);
  --glass-border: rgba(255, 255, 255, 0.06);

  --border:   rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.10);
  --border-3: rgba(255, 255, 255, 0.16);

  --text:   #FAFAFA;
  --text-2: #E0E0E4;
  --text-3: #A0A0A8;
  --text-4: #6B6B75;
  --text-on-brand: #FFFFFF;
  --text-on-gold:  #12141A;
  --brand-yellow-text: #F9D043;

  --nav-bg:   rgba(10, 10, 10, 0.95);
  --sheet-bg: rgba(18, 18, 20, 0.98);
  --input-bg:     rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.08);

  --shadow:    0 8px 32px rgba(0, 0, 0, 0.50);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.70);
  --shadow-brand: 0 4px 20px rgba(0, 132, 95, 0.30);
  --shadow-gold:  0 4px 20px rgba(249, 208, 67, 0.20);
  --shadow-offset: 4px 4px 0 #FAFAFA;

  --gradient-brand: linear-gradient(135deg, #00845F 0%, #006D4E 100%);
  --gradient-gold:  linear-gradient(135deg, #F9D043 0%, #E8BF20 100%);
  --gradient-bg:    linear-gradient(160deg, #0A0A0A 0%, #141416 100%);
  --gradient-card:  linear-gradient(145deg, rgba(20,20,22,0.9) 0%, rgba(14,14,16,0.7) 100%);

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