/* ==========================================================================
   DESIGN TOKENS — CYAN • LIME • ROSE ON SLATE
   Modern gradient-driven design for DevSecOps & Cloud Security Engineer
   ========================================================================== */

/* Registers a custom angle property so conic gradients can animate smoothly */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* Modern Slate Canvas */
  --bg-darkest: #0f172a;
  --bg-primary: #1a2844;
  --bg-secondary: #254162;
  --bg-tertiary: #1e3a5f;
  --bg-surface: rgba(26, 40, 68, 0.7);
  --bg-surface-hover: rgba(37, 65, 98, 0.9);

  /* Modern Accent Spectrum */
  --color-white: #ffffff;
  --color-frost: #f0f9ff;
  --white-glow: rgba(240, 249, 255, 0.4);

  /* Cyan: Primary Tech Color */
  --color-cyan: #06b6d4;
  --color-cyan-light: #22d3ee;
  --color-cyan-deep: #0891b2;

  /* Lime: Energy & Highlight */
  --color-lime: #84cc16;
  --color-lime-light: #bef264;
  --color-lime-deep: #65a30d;

  /* Rose: Premium Accent */
  --color-rose: #f43f5e;
  --color-rose-light: #fb7185;
  --color-rose-deep: #e11d48;

  /* Legacy aliases (purple -> cyan, yellow -> lime) for backward compatibility */
  --color-purple: #06b6d4;
  --color-purple-light: #22d3ee;
  --color-purple-deep: #0891b2;

  --color-yellow: #84cc16;
  --color-yellow-light: #bef264;
  --color-yellow-deep: #65a30d;

  --cyan-glow: rgba(6, 182, 212, 0.4);
  --lime-glow: rgba(132, 204, 22, 0.35);
  --rose-glow: rgba(244, 63, 94, 0.35);

  --cyan-subtle: rgba(6, 182, 212, 0.1);
  --lime-subtle: rgba(132, 204, 22, 0.1);
  --rose-subtle: rgba(244, 63, 94, 0.08);
  --purple-subtle: var(--cyan-subtle);

  /* Borders & Highlights */
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-card: rgba(6, 182, 212, 0.2);
  --border-hover: rgba(244, 63, 94, 0.5);

  /* Signature Gradients */
  --grad-spectrum: linear-gradient(120deg, #f0f9ff 0%, #22d3ee 30%, #84cc16 58%, #fb7185 85%);
  --grad-btn: linear-gradient(120deg, #f0f9ff 0%, #06b6d4 35%, #84cc16 65%, #fb7185 100%);
  --grad-line: linear-gradient(90deg, transparent, #22d3ee 25%, #84cc16 55%, #fb7185 85%, transparent);

  /* Text Colors */
  --text-primary: #f0f9ff;
  --text-secondary: #cffafe;
  --text-muted: #7dd3fc;
  --text-dim: #38bdf8;

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Fluid Typography Scale */
  --text-xs: clamp(0.6875rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1.02rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.1875rem, 1.12rem + 0.35vw, 1.25rem);
  --text-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.55rem);
  --text-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.1rem);
  --text-4xl: clamp(2.15rem, 1.8rem + 1.5vw, 2.7rem);
  --text-5xl: clamp(2.75rem, 2.2rem + 2.5vw, 3.8rem);

  /* Layout & Sizing */
  --container-max: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 2rem);
  --section-spacing: clamp(4.5rem, 8vw, 7rem);
  --nav-height: 72px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Radiant Glow Shadows */
  --shadow-card: 0 10px 35px -5px rgba(0, 0, 0, 0.6);
  --shadow-glow-tri: 0 0 35px -5px rgba(232, 121, 249, 0.3);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  --z-sticky: 100;
}