:root {
  color-scheme: light;

  --ng-font-heading: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif;
  --ng-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --ng-font-mono: "SFMono-Regular", "SF Mono", Consolas, monospace;

  --ng-neutral-50: #f7fafb;
  --ng-neutral-100: #eef3f6;
  --ng-neutral-200: #dee6ec;
  --ng-neutral-300: #c8d3dd;
  --ng-neutral-400: #a6b4c1;
  --ng-neutral-500: #7e8d9d;
  --ng-neutral-600: #5e6d7d;
  --ng-neutral-700: #465463;
  --ng-neutral-800: #334252;
  --ng-neutral-900: #1f2c38;

  --ng-primary: #2f93ca;
  --ng-primary-strong: #236f9f;
  --ng-secondary: #2ec4c3;
  --ng-accent: #b5db70;
  --ng-info: #79d8df;
  --ng-success: #7fc59a;

  --ng-bg: #f4f8fb;
  --ng-surface: rgba(255, 255, 255, 0.8);
  --ng-surface-solid: #fbfdfe;
  --ng-surface-elevated: #f8fbfd;
  --ng-surface-soft: #edf4f6;
  --ng-surface-hero: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 247, 250, 0.84) 100%);
  --ng-border: rgba(70, 84, 99, 0.14);
  --ng-border-strong: rgba(70, 84, 99, 0.26);
  --ng-text-primary: #25313f;
  --ng-text-secondary: #566473;
  --ng-text-muted: #7a8998;
  --ng-focus-ring: rgba(48, 159, 216, 0.34);
  --ng-cta-bg: linear-gradient(135deg, #309fd8 0%, #30c8c6 68%, #b7df6d 100%);
  --ng-cta-hover: linear-gradient(135deg, #2b90c6 0%, #2ab5b6 68%, #a4cd57 100%);
  --ng-cta-active: linear-gradient(135deg, #2279aa 0%, #239ca4 68%, #95ba48 100%);
  --ng-header-surface: rgba(250, 252, 253, 0.8);
  --ng-shadow-color: rgba(26, 49, 71, 0.16);
  --ng-shadow-sm: 0 12px 30px rgba(26, 49, 71, 0.08);
  --ng-shadow-md: 0 24px 60px rgba(26, 49, 71, 0.12);
  --ng-shadow-lg: 0 32px 84px rgba(20, 41, 61, 0.16);
  --ng-gradient-wash: radial-gradient(circle at top left, rgba(48, 200, 198, 0.18), transparent 42%), radial-gradient(circle at top right, rgba(183, 223, 109, 0.14), transparent 36%);
  --ng-gradient-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(240, 247, 250, 0.72));
  --ng-gradient-muted: linear-gradient(145deg, rgba(49, 113, 161, 0.08), rgba(46, 196, 195, 0.08) 56%, rgba(181, 219, 112, 0.12));
  --ng-gradient-shield: linear-gradient(135deg, rgba(40, 92, 134, 0.94) 0%, rgba(43, 122, 165, 0.92) 48%, rgba(46, 196, 195, 0.82) 100%);
  --ng-highlight-glow: rgba(46, 196, 195, 0.18);

  --ng-size--1: 0.875rem;
  --ng-size-0: 1rem;
  --ng-size-1: 1.125rem;
  --ng-size-2: 1.25rem;
  --ng-size-3: 1.5rem;
  --ng-size-4: 1.875rem;
  --ng-size-5: 2.375rem;
  --ng-size-6: 3rem;
  --ng-size-7: clamp(3.25rem, 6vw, 4.75rem);

  --ng-line-tight: 1.12;
  --ng-line-snug: 1.25;
  --ng-line-copy: 1.62;
  --ng-line-loose: 1.75;

  --ng-weight-regular: 400;
  --ng-weight-medium: 500;
  --ng-weight-semibold: 600;
  --ng-weight-bold: 700;
  --ng-weight-extrabold: 800;

  --ng-space-1: 0.25rem;
  --ng-space-2: 0.5rem;
  --ng-space-3: 0.75rem;
  --ng-space-4: 1rem;
  --ng-space-5: 1.5rem;
  --ng-space-6: 2rem;
  --ng-space-7: 3rem;
  --ng-space-8: 4rem;
  --ng-space-9: 5rem;
  --ng-space-10: 7rem;

  --ng-radius-sm: 0.75rem;
  --ng-radius-md: 1.125rem;
  --ng-radius-lg: 1.5rem;
  --ng-radius-xl: 2rem;
  --ng-radius-pill: 999px;

  --ng-container-narrow: 46rem;
  --ng-container-content: 68rem;
  --ng-container-wide: 76rem;

  --ng-section-space: clamp(4rem, 7vw, 7rem);
  --ng-section-space-tight: clamp(3rem, 5vw, 4.5rem);

  --ng-grid-gap: clamp(1.25rem, 2vw, 2rem);

  --ng-duration-fast: 180ms;
  --ng-duration-base: 220ms;
  --ng-duration-slow: 240ms;
  --ng-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ng-bg: #08131c;
  --ng-surface: rgba(11, 24, 34, 0.84);
  --ng-surface-solid: #0d1d29;
  --ng-surface-elevated: #132734;
  --ng-surface-soft: #102534;
  --ng-surface-hero: linear-gradient(180deg, rgba(14, 28, 38, 0.94) 0%, rgba(9, 20, 29, 0.88) 100%);
  --ng-border: rgba(198, 216, 229, 0.15);
  --ng-border-strong: rgba(198, 216, 229, 0.28);
  --ng-text-primary: #e8f1f6;
  --ng-text-secondary: #beccda;
  --ng-text-muted: #91a4b6;
  --ng-focus-ring: rgba(114, 218, 222, 0.38);
  --ng-cta-bg: linear-gradient(135deg, #39a9df 0%, #38c3cb 70%, #b7df6d 100%);
  --ng-cta-hover: linear-gradient(135deg, #4eb3e3 0%, #4acdd3 70%, #c0e776 100%);
  --ng-cta-active: linear-gradient(135deg, #3198c9 0%, #2fb1b8 70%, #a2c95a 100%);
  --ng-header-surface: rgba(9, 18, 27, 0.84);
  --ng-shadow-color: rgba(0, 0, 0, 0.35);
  --ng-shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.18);
  --ng-shadow-md: 0 24px 64px rgba(0, 0, 0, 0.24);
  --ng-shadow-lg: 0 38px 96px rgba(0, 0, 0, 0.3);
  --ng-gradient-wash: radial-gradient(circle at top left, rgba(56, 195, 203, 0.18), transparent 42%), radial-gradient(circle at top right, rgba(183, 223, 109, 0.12), transparent 38%);
  --ng-gradient-panel: linear-gradient(180deg, rgba(12, 25, 36, 0.8), rgba(9, 19, 28, 0.78));
  --ng-gradient-muted: linear-gradient(145deg, rgba(52, 116, 161, 0.16), rgba(56, 195, 203, 0.12) 56%, rgba(183, 223, 109, 0.12));
  --ng-gradient-shield: linear-gradient(135deg, rgba(48, 119, 174, 0.96) 0%, rgba(47, 159, 216, 0.9) 50%, rgba(56, 195, 203, 0.84) 100%);
  --ng-highlight-glow: rgba(56, 195, 203, 0.14);
}