:root {
  /* Brand palette */
  --color-bg-dark: #184063;
  --color-bg-blue: #084da5;
  --color-bg-mid:  #1869af;
  --color-accent:  #3fd6d6;
  --color-white:   #ffffff;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.78);
  --text-dark: #184063;
  --text-dark-secondary: rgba(24,64,99,0.78);

  /* Layout */
  --max: 1100px;
  --pad: 20px;

  /* Radius & shadow */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,0.18);
  --shadow-hard: 0 18px 50px rgba(0,0,0,0.28);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 150ms var(--ease);
  --t-base: 350ms var(--ease);
  --t-slow: 700ms var(--ease);

  /* Spacing scale */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  28px;
  --sp-lg:  48px;
  --sp-xl:  80px;

  /* Font scale */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   18px;
  --fs-lg:   clamp(22px, 2.4vw, 30px);
  --fs-xl:   clamp(34px, 4.2vw, 56px);

  /* Glow (accent color) */
  --glow-accent:  0 0 0 3px rgba(63,214,214,0.18), 0 8px 24px rgba(63,214,214,0.28);
  --glow-primary: 0 0 0 3px rgba(63,214,214,0.22), 0 12px 32px rgba(63,214,214,0.36);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(63,214,214,0.55);

  /* Font */
  --font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}