/**
 * Beta Energy — Design System Tokens & Variables
 */
:root {
  /* Brand Color Palette */
  --navy: #0A1420;
  --navy-soft: #101B2D;
  --navy-card: #152238;
  --accent: #0F6E96;
  --accent-light: #158bbd;
  --accent-dark: #0A597A;
  --accent-glow: rgba(15, 110, 150, 0.35);

  /* Neutrals */
  --white: #FFFFFF;
  --light: #F4F5F7;
  --light-gray: #EAECEF;
  --text: #12181F;
  --text-muted: #6B7280;
  --text-light: rgba(255, 255, 255, 0.85);
  --border: #E3E6EA;
  --border-dark: rgba(255, 255, 255, 0.12);

  /* Status Colors */
  --error: #C0392B;
  --success: #10B981;

  /* Typography */
  --font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacings & Layout */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --container-width: 1200px;
  --page-gutter: 40px;          /* Shared horizontal padding — logo & all content */
  --header-height: 72px;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(10, 20, 32, 0.06);
  --shadow-md: 0 10px 25px rgba(10, 20, 32, 0.12);
  --shadow-lg: 0 20px 45px rgba(10, 20, 32, 0.22);
  --shadow-floating: 0 12px 30px rgba(0, 0, 0, 0.28);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive gutter — alignment stays perfect at every size */
@media (max-width: 900px) {
  :root { --page-gutter: 20px; }
}

@media (max-width: 480px) {
  :root { --page-gutter: 16px; }
}