/* ==========================================================================
   Design Tokens — Chosen Home
   Single source of truth for colors, typography, spacing, and layout.
   ========================================================================== */

:root {
  /* === Brand Colors === */
  --color-primary:        #1B3A6B;  /* Deep Navy */
  --color-secondary:      #0096C7;  /* Ocean Teal */
  --color-accent:         #F4C430;  /* Saffron Gold */
  --color-text:           #1C1C1E;  /* Near Black */
  --color-bg:             #FFF;  /* White */
  --color-highlight-bg:   #E6F3F8;  /* Light Teal */

  /* Derived */
  --color-primary-dark:   #142d55;
  --color-secondary-dark: #007aa3;
  --color-accent-dark:    #d4a820;
  --color-text-muted:     #5A5A5E;
  --color-border:         #D1D5DB;
  --color-error:          #C00;
  --color-success:        #1A7340;

  /* === Typography === */
  --font-heading:   'Zilla Slab', georgia, serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* === Spacing (8 px 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;

  /* === Layout === */
  --container-max:    1200px;
  --container-narrow: 780px;

  /* === Borders & Radius === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 10%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 12%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 14%);

  /* === Transitions === */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

  /* === Focus === */
  --focus-ring: 0 0 0 3px var(--color-accent);

  /* === Z-index === */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}