/**
 * abcray Design Tokens & Variables
 * Professionally harmonized with the brand logo's Aegean Cyan-Blue (#2D92B6) & Pure White (#FFFFFF)
 */

:root {
  /* ========================================================================
     Logo-Matched Brand Colors (Anchored on #2D92B6 & #FFFFFF)
     ======================================================================== */
  --brand-primary: #2D92B6;          /* Core Logo Shield Color (Aegean Cyan-Blue) */
  --brand-primary-light: #38B6DC;    /* Luminous interactive cyan (active/hover) */
  --brand-primary-dark: #196783;     /* Deep anchored contrast shade */
  --brand-primary-dim: #134B5F;      /* Subtle border & accent base */
  
  --brand-cyan: #38B6DC;             /* Vibrant highlight tint */
  --brand-cyan-glow: #5BD1F5;        /* High-luminance accent glow */
  --brand-navy: #0E3544;             /* Deep oceanic navy */

  /* Functional Accents */
  --brand-emerald: #00D294;          /* Energy Sector & Telemetry Green */
  --brand-amber: #F59E0B;            /* Attention & Metric Indicator */

  /* ========================================================================
     Dark Theme Surfaces (Tuned to 196° Marine Obsidian Undertones)
     ======================================================================== */
  --bg-dark: #07131B;                /* Deep Marine Obsidian canvas */
  --bg-surface: #0C1F2B;             /* Elevated oceanic slate */
  --bg-card: rgba(12, 31, 43, 0.78); /* Frosted glass card tuned to logo */
  --bg-card-hover: rgba(17, 44, 61, 0.92);
  --bg-glass: rgba(7, 19, 27, 0.90); /* Navigation blur backdrop */

  /* ========================================================================
     Borders & Glows
     ======================================================================== */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(45, 146, 182, 0.40);
  --border-brand: rgba(45, 146, 182, 0.55);

  /* ========================================================================
     Typography Colors
     ======================================================================== */
  --text-main: #FFFFFF;              /* Crisp Pure White (matching logo wordmark & stripes) */
  --text-body: #D0E4EE;              /* Soft marine-tinted light slate for readability */
  --text-muted: #8AA4B2;             /* Muted tech slate */
  --text-dim: #557484;               /* Subtle caption */

  /* Typography Stack */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows & Glows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 35px rgba(45, 146, 182, 0.30);
  --shadow-brand: 0 8px 25px rgba(45, 146, 182, 0.42);

  /* Layout */
  --container-max: 1280px;
  --header-height: 80px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}