/* ==========================================================================
   Design Tokens — Veeria Consulting
   Palette derived from brand mark: tech blue / silver / charcoal
   ========================================================================== */

:root {
  /* Color: Brand */
  --color-primary-900: #0b3d7a;
  --color-primary-700: #1a5fb0;
  --color-primary-600: #2266c9;
  --color-primary-500: #2c7be5;
  --color-primary-400: #4f95f0;
  --color-primary-300: #82b6f5;
  --color-primary-100: #e7f0fd;

  /* Color: Neutrals (charcoal / navy for dark surfaces) */
  --color-navy-950: #070c16;
  --color-navy-900: #0a1224;
  --color-navy-800: #101b33;
  --color-navy-700: #17233f;
  --color-navy-600: #253355;

  /* Color: Silver / slate (secondary accent) */
  --color-silver-400: #aab4c2;
  --color-silver-300: #c4cdd8;
  --color-silver-200: #dde3ea;

  /* Color: Slate (text / neutral UI on light surfaces) */
  --color-slate-900: #141b28;
  --color-slate-700: #384357;
  --color-slate-500: #5c6b81;
  --color-slate-300: #b3bece;
  --color-slate-100: #eef1f6;

  /* Color: Surfaces */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f8fc;
  --color-bg-dark: var(--color-navy-900);

  /* Color: Semantic */
  --color-success: #1fa971;
  --color-danger: #d94848;
  --color-focus: #2c7be5;

  /* Color: Text */
  --color-text: var(--color-slate-900);
  --color-text-muted: var(--color-slate-500);
  --color-text-inverse: #f5f8ff;
  --color-text-inverse-muted: #a9b6cc;

  /* Typography */
  --font-heading: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, 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.75rem;
  --fs-4xl: 3.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Spacing (8px rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Shadow (brand-tinted, soft) */
  --shadow-sm: 0 1px 2px rgba(10, 18, 36, 0.06), 0 1px 1px rgba(10, 18, 36, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 18, 36, 0.08), 0 2px 6px rgba(10, 18, 36, 0.06);
  --shadow-lg: 0 24px 48px rgba(10, 18, 36, 0.14), 0 8px 16px rgba(10, 18, 36, 0.08);
  --shadow-glow: 0 0 0 1px rgba(44, 123, 229, 0.15), 0 16px 40px rgba(44, 123, 229, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 650ms;

  /* Layout */
  --container-max: 1240px;
  --container-pad: var(--space-5);
  --header-h: 84px;

  /* Z-index scale */
  --z-base: 0;
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}