/* =========================================================
   VSEC Cloud Security — Design Tokens
   ========================================================= */
:root {
  /* ---- Brand Colors ---- */
  --color-navy-950: #0b1530;
  --color-navy-900: #0f1c3f;
  --color-navy-800: #172d70;
  --color-indigo-700: #1e3a8a;
  --color-indigo-600: #2545a0;
  --color-blue-600: #135a8a;
  --color-teal-500: #18a9b8;
  --color-teal-400: #2ec4d6;
  --color-cyan-300: #7fe3ec;

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-grey-50: #f6f8fb;
  --color-grey-100: #eef1f7;
  --color-grey-200: #dde3ee;
  --color-grey-300: #c3cbdd;
  --color-grey-500: #7c88a6;
  --color-grey-700: #4a5570;
  --color-grey-800: #2c3552;
  --color-grey-900: #171f36;

  /* ---- Accent ---- */
  --color-aws-orange: #ff9900;

  /* ---- Semantic ---- */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-grey-50);
  --color-text: var(--color-grey-900);
  --color-text-muted: var(--color-grey-700);
  --color-text-inverse: var(--color-white);
  --color-border: var(--color-grey-200);

  /* ---- Radial gradient theme (from VSEC x AWS deck) ---- */
  --gradient-hero: radial-gradient(120% 120% at 20% 15%, #1c3f8f 0%, #14356f 28%, #0f2a58 48%, #0e2450 62%, #0a1b3c 100%);
  --gradient-hero-accent: radial-gradient(80% 80% at 85% 20%, rgba(24, 169, 184, 0.35) 0%, rgba(24, 169, 184, 0) 60%);
  --gradient-band: linear-gradient(135deg, #172d70 0%, #135a8a 55%, #18a9b8 100%);
  --gradient-card: linear-gradient(160deg, rgba(23, 45, 112, 0.06) 0%, rgba(24, 169, 184, 0.04) 100%);
  --gradient-text: linear-gradient(90deg, #7fe3ec 0%, #ffffff 60%);

  /* ---- Typography ---- */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.875rem;
  --fs-4xl: 3.5rem;
  --fs-huge: 5rem;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;

  /* ---- Layout ---- */
  --max-width: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(15, 28, 63, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 28, 63, 0.10);
  --shadow-lg: 0 20px 48px rgba(15, 28, 63, 0.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-modal: 300;
  --z-cta: 90;
}