/* ==========================================================================
   Bahali Psychology — Design Tokens
   Single source of truth for color, type, spacing. Do not hardcode values
   elsewhere in the theme — reference these custom properties.
   ========================================================================== */

:root {
  /* Color palette (from style guide) */
  --color-navy: #0D1B2A;
  --color-ivory: #FAF6F0;
  --color-warm-beige: #E9E0D3;
  --color-taupe: #B6A897;
  --color-soft-gold: #C89D5B;
  --color-gold-deep: #8A6524; /* accessible-contrast gold for text (eyebrows, italic accents, numbering) — soft-gold stays reserved for buttons/borders */
  --color-sage-green: #5A644F;
  --color-charcoal: #2A2A2A;
  --color-white: #FFFFFF;

  /* Semantic color roles */
  --color-bg: var(--color-ivory);
  --color-bg-alt: var(--color-warm-beige);
  --color-bg-dark: var(--color-navy);
  --color-text: var(--color-charcoal);
  --color-text-muted: #55524c;
  --color-text-on-dark: var(--color-ivory);
  --color-border: var(--color-taupe);
  --color-accent: var(--color-soft-gold);
  --color-link: var(--color-sage-green);

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale (desktop) — fluid via clamp for responsiveness */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);     /* 64px desktop */
  --fs-h2: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);      /* 48px desktop */
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2.25rem);   /* 36px desktop */
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);  /* 24px desktop */
  --fs-body-l: 1.125rem;   /* 18px */
  --fs-body: 1rem;         /* 16px */
  --fs-nav: 0.9375rem;     /* 15px */
  --fs-button: 0.8125rem;  /* 13px */
  --fs-label: 0.8125rem;   /* 11px */
  --fs-footer: 0.8125rem;  /* 13px */

  --lh-heading: 1.15;
  --lh-body: 1.65;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-width: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 4px;
  --radius-md: 8px;
  --border-width: 1px;

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-base: 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}