/* ==========================================================================
   STELLAR PIPES - DESIGN SYSTEM & CSS VARIABLES
   File: css/variables.css
   ========================================================================== */

:root {
  /* Brand Palette */
  --navy: #0A2540;        /* Primary Dark / Hero / Footer */
  --navy-dark: #061627;   /* Deeper Navy for contrasts */
  --navy-light: #13395F;  /* Hover / Subtle borders */
  --blue: #0B5ED7;        /* Core Brand Blue */
  --blue-hover: #094CB0;  /* Button Hover */
  --aqua: #19B5E8;        /* Water Accent / Icons / Highlights */
  --aqua-soft: rgba(25, 181, 232, 0.12);
  --safety: #F5A524;      /* High-Conversion CTA Orange (Quotes) */
  --safety-hover: #D98C15;
  --whatsapp: #25D366;    /* Official WhatsApp Green */
  --whatsapp-hover: #1EBE5D;

  /* Typography Colors */
  --ink: #0F172A;         /* Primary Body Text */
  --ink-secondary: #334155;
  --muted: #5B6B7F;       /* Secondary Text / Captions */
  --muted-light: #94A3B8;

  /* Backgrounds & Surfaces */
  --bg: #FFFFFF;
  --bg-soft: #F3F8FC;     /* Subtle industrial soft tint */
  --bg-subtle: #EAF2F9;
  --surface: #FFFFFF;
  --line: #DCE6F0;        /* Subtle Border Grays */
  --line-strong: #CBD5E1;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 6px rgba(10, 37, 64, 0.05);
  --shadow: 0 10px 30px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 37, 64, 0.14);
  --shadow-hover: 0 14px 34px rgba(11, 94, 215, 0.16);

  /* Border Radii */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Typography Stack */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-tamil: 'Noto Sans Tamil', 'Inter', sans-serif;

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout Spacing */
  --container-max: 1240px;
  --section-pad-desktop: 90px 0;
  --section-pad-mobile: 56px 0;
  --header-height: 76px;
  --announcement-height: 40px;
}