* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Base surfaces */
  --bg: #0a0a10;
  --bg-2: #12121c;
  --bg-card: #12121c;
  --bg-sidebar: #0d0d15;
  --surface: rgba(18, 22, 30, 0.88);
  --surface-2: rgba(25, 30, 40, 0.92);
  --surface-3: rgba(31, 37, 48, 0.88);

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text: #e6ebf2;
  --text-soft: #a7b0bd;
  --text-muted: #6f7a88;
  --text-dim: #495261;

  /* ENGIE accent (shell, pills, active states) */
  --accent: #009de0;
  --accent-2: #2bb7ee;
  --accent-dim: rgba(0, 157, 224, 0.12);
  --grad-accent: linear-gradient(135deg, #0083cc 0%, #2bb7ee 100%);
  --seg-bg: rgba(255, 255, 255, 0.05);
  --seg-border: rgba(255, 255, 255, 0.08);

  /* Semantic colors (business components) */
  --green: #4ade80;
  --green-dim: rgba(74, 222, 128, 0.12);
  --cyan: #56c8d8;
  --amber: #f0b85a;
  --yellow: #f0b85a;
  --red: #ec6f72;
  --violet: #8f8cff;
  --blue: #6aa7ff;
  --purple: #8f8cff;
  --line: rgba(184, 198, 255, 0.55);

  /* Aliases so business components map to the ENGIE shell */
  --pink: #ff6b9d;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
  --blur-sidebar: blur(12px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --gap-section: 24px;
  --gap-grid: 20px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition: 0.2s ease;
}

body.theme-light {
  --bg: #f5f5f7;
  --bg-2: #ffffff;
  --bg-card: #ffffff;
  --bg-sidebar: rgba(255, 255, 255, 0.85);
  --surface: rgba(255, 255, 255, 0.9);
  --surface-2: rgba(255, 255, 255, 0.96);
  --surface-3: rgba(245, 248, 252, 0.96);
  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.18);
  --border-strong: rgba(14, 23, 38, 0.16);
  --text: #1a1a25;
  --text-soft: #4d5969;
  --text-muted: #6b7280;
  --text-dim: #9ca3af;
  --accent-dim: rgba(0, 157, 224, 0.10);
  --seg-bg: rgba(0, 0, 0, 0.04);
  --seg-border: rgba(0, 0, 0, 0.07);
  --line: rgba(73, 92, 140, 0.45);
  --shadow: 0 16px 40px rgba(18, 28, 45, 0.10);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.1);
}