:root {
  /* --- Navy Blue Story (dominant) --- */
  --color-navy-950: #0a1929;
  --color-navy-900: #0d2137;
  --color-navy-800: #1a3a6b;
  --color-navy-700: #1e4d8f;
  --color-navy-600: #2563a8;
  --color-navy-500: #3b82c4;
  --color-navy-400: #60a5e0;
  --color-navy-300: #93c5f6;
  --color-navy-200: #bfdbfe;
  --color-navy-100: #dbeafe;
  --color-navy-50:  #eff6ff;

  /* --- Accent: Gold/Amber (from invoice logo) --- */
  --color-accent-700: #a16207;
  --color-accent-600: #ca8a04;
  --color-accent-500: #d4a017;
  --color-accent-400: #f0c040;
  --color-accent-300: #fcd34d;
  --color-accent-100: #fef3c7;

  /* --- Neutrals (cool-toned for navy) --- */
  --color-neutral-950: #111827;
  --color-neutral-900: #1f2937;
  --color-neutral-700: #374151;
  --color-neutral-500: #6b7280;
  --color-neutral-300: #d1d5db;
  --color-neutral-200: #e5e7eb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-50:  #f9fafb;
  --color-white:       #ffffff;

  /* --- Semantic --- */
  --color-primary:       var(--color-navy-800);
  --color-primary-hover: var(--color-navy-700);
  --color-primary-light: var(--color-navy-600);
  --color-text:          var(--color-neutral-900);
  --color-text-muted:    var(--color-neutral-500);
  --color-text-light:    var(--color-neutral-700);
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-navy-50);
  --color-bg-dark:       var(--color-navy-950);
  --color-accent:        var(--color-accent-500);

  /* --- Spacing (8px base) --- */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Typography --- */
  --font-display: 'Prompt', sans-serif;
  --font-body:    'Sarabun', sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* --- Border Radius --- */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* --- Shadows (navy-tinted) --- */
  --shadow-sm:  0 1px 2px rgba(10, 25, 41, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(10, 25, 41, 0.08), 0 2px 4px -2px rgba(10, 25, 41, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(10, 25, 41, 0.1), 0 4px 6px -4px rgba(10, 25, 41, 0.06);
  --shadow-xl:  0 20px 25px -5px rgba(10, 25, 41, 0.1), 0 8px 10px -6px rgba(10, 25, 41, 0.06);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-padding: var(--space-4);
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-8);
  }
}