/* DropForce Systems — Brand Variables v2.0 */
/* Source: dropforce-website-claude.md */

:root {
  /* === PRIMARY BRAND COLORS === */
  --color-brand-cyan: #22d3ee;
  --color-cyan-bright: #67E8F9;
  --color-cyan-deep: #0891B2;
  --color-brand-navy: #080F1A;
  --color-navy-deep: #001829;

  /* === BACKGROUNDS === */
  --color-bg-primary: #080F1A;
  --color-bg-secondary: #0f1b2e;
  --color-bg-card: #0d1f35;
  --color-bg-hover: rgba(34,211,238,0.08);

  /* === BORDERS === */
  --color-border-tactical: #1a3a52;
  --color-border-accent: #22d3ee;

  /* === TEXT === */
  --color-text-primary: #e8f0e5;
  --color-text-secondary: rgba(232,240,229,0.6);
  --color-text-tertiary: rgba(232,240,229,0.3);
  --color-text-accent: #22d3ee;

  /* === STATUS INDICATORS === */
  --color-status-online: #34d399;
  --color-status-caution: #f8bf24;
  --color-status-alert: #f97316;
  --color-status-fault: #ef4444;
  --color-status-info: #22d3ee;
  --color-status-pipeline: rgba(232,240,229,0.2);

  /* === FONTS === */
  --font-heading: 'Space Grotesk', 'Roboto Mono', monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* === TRANSITIONS === */
  --transition-fast: 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-slow: 400ms ease-out;

  /* === GLOWS === */
  --glow-brand-light: rgba(34,211,238,0.3);
  --glow-brand-intense: rgba(34,211,238,0.6);
  --glow-green-light: rgba(52,211,153,0.35);
  --glow-green-intense: rgba(52,211,153,0.65);
  --glow-yellow-light: rgba(248,191,36,0.3);

  /* === SPACING === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* === LAYOUT === */
  --max-width: 1200px;
  --nav-height: 64px;
  --border-radius: 2px;

  /* === GRID OVERLAY === */
  --grid-overlay: repeating-linear-gradient(
    0deg, transparent, transparent 40px,
    rgba(34,211,238,0.03) 40px, rgba(34,211,238,0.03) 41px
  ), repeating-linear-gradient(
    90deg, transparent, transparent 40px,
    rgba(34,211,238,0.025) 40px, rgba(34,211,238,0.025) 41px
  );
}

.text-accent    { color: var(--color-text-accent); }
.text-secondary { color: var(--color-text-secondary); }
.status-online  { color: var(--color-status-online); }
.status-caution { color: var(--color-status-caution); }
.font-mono      { font-family: var(--font-mono); }