:root {
  /* Brand palette */
  --navy-dark: #071B2A;
  --navy-deeper: #04111B;
  --teal-deep: #0A6E7A;
  --cyan-aviation: #16C2D5;
  --cyan-bright: #4DE0F0;
  --cyan-soft: #B7F0F8;
  --smoke-white: #F4F8FB;
  --gray-metallic: #7A8A99;
  --gray-cool: #4A5A6B;

  /* Severity / accent */
  --accent-warm: #FF7A45;
  --accent-amber: #FFB547;
  --danger: #FF5252;
  --critical: #F87171;
  --success: #4ADE80;
  --warning: #FBBF24;

  /* Layered surfaces */
  --surface-0: #04111B;
  --surface-1: rgba(15, 35, 52, 0.62);
  --surface-2: rgba(22, 45, 65, 0.7);
  --surface-3: rgba(28, 55, 78, 0.78);
  --surface-glass: rgba(255, 255, 255, 0.04);

  /* Borders */
  --border-subtle: rgba(122, 138, 153, 0.16);
  --border-default: rgba(122, 138, 153, 0.28);
  --border-cyan: rgba(22, 194, 213, 0.32);
  --border-cyan-strong: rgba(22, 194, 213, 0.55);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #16C2D5 0%, #0A6E7A 100%);
  --grad-primary-bright: linear-gradient(135deg, #4DE0F0 0%, #16C2D5 100%);
  --grad-text: linear-gradient(135deg, #4DE0F0 0%, #16C2D5 45%, #B7F0F8 100%);
  --grad-mesh:
    radial-gradient(at 18% 12%, rgba(22, 194, 213, 0.22) 0%, transparent 45%),
    radial-gradient(at 82% 18%, rgba(10, 110, 122, 0.28) 0%, transparent 50%),
    radial-gradient(at 72% 88%, rgba(255, 122, 69, 0.10) 0%, transparent 55%),
    radial-gradient(at 8% 92%, rgba(22, 194, 213, 0.14) 0%, transparent 45%);
  --grad-card: linear-gradient(160deg, rgba(22, 45, 70, 0.55) 0%, rgba(7, 27, 42, 0.35) 100%);
  --grad-hero-overlay: linear-gradient(180deg, rgba(4, 17, 27, 0) 0%, rgba(4, 17, 27, 0.85) 100%);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing */
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 48px;
  --spacing-6: 64px;
  --spacing-7: 96px;
  --spacing-8: 128px;

  /* Layout */
  --max-width: 1280px;

  /* Shadows / glows */
  --shadow-soft: 0 32px 80px -20px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 20px 50px -16px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 36px 80px -20px rgba(0, 0, 0, 0.7);
  --shadow-glow-cyan: 0 0 40px -8px rgba(22, 194, 213, 0.55);
  --shadow-button: 0 10px 28px -10px rgba(22, 194, 213, 0.6);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
}