/* ==========================================================================
   Nuvision Marketing — Design Tokens
   Primitives -> semantic tokens -> contextual overrides (.band-dark)
   ========================================================================== */

:root {
  /* ---- Primitives (exact brand hex values) ---- */
  --sage: #8FAE9D;
  --sage-dark: #6F9481;      /* darkened for hover/pressed states, AA-safe with near-black text */
  --deep-green: #5F7E6E;
  --forest: #4C6659;         /* darker derivative of deep-green, WCAG AA-safe as small text/link color
                                 on light backgrounds and as the .band-dark section background paint;
                                 --deep-green itself (the confirmed brand hex) is kept for icons/gradients
                                 where only 3:1 non-text contrast applies */
  --near-black: #1F1F1F;
  --tan: #D8C7B0;
  --tan-wash: rgba(216, 199, 176, 0.22);
  --off-white: #F6F4F1;
  --white: #FFFFFF;

  /* ---- Semantic tokens (light context = default) ---- */
  --color-bg: var(--off-white);
  --color-surface: var(--white);
  --color-surface-wash: var(--tan-wash);
  --color-text: var(--near-black);
  --color-text-muted: #55605A;
  --color-heading: var(--near-black);
  --color-primary: var(--sage);
  --color-primary-hover: var(--sage-dark);
  --color-on-primary: var(--near-black);
  --color-accent: var(--tan);
  --color-border: rgba(31, 31, 31, 0.12);
  --color-focus-ring: rgba(31, 31, 31, 0.55);
  --color-link: var(--forest);

  /* ---- Typography ---- */
  --font-heading: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  --text-xs:   clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-base: 1rem;
  --text-lg:   clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);
  --text-5xl:  clamp(2.75rem, 2rem + 3.5vw, 4.25rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;
  --space-20: 8rem;

  --tap-min: 44px;

  /* ---- Radius / shadow ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.06);
  --shadow-md: 0 4px 16px rgba(31, 31, 31, 0.08);
  --shadow-lg: 0 16px 40px rgba(31, 31, 31, 0.16);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 320ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms;
    --transition-base: 1ms;
    --transition-slow: 1ms;
  }
}

/* Dark-band contextual override: flips every semantic token at once.
   Applied to a whole <section> so buttons/links/cards inside inherit
   the correct inverted values automatically. */
.band-dark {
  --color-bg: var(--forest); /* deep-green itself is 4.07:1 with off-white text — below AA body text;
                                 forest is the accessible-contrast variant used for this band's fill */
  --color-surface: rgba(255, 255, 255, 0.07);
  --color-surface-wash: rgba(255, 255, 255, 0.05);
  --color-text: var(--off-white);
  --color-text-muted: rgba(246, 244, 241, 0.75);
  --color-heading: var(--off-white);
  --color-on-primary: var(--near-black);
  --color-border: rgba(246, 244, 241, 0.2);
  --color-focus-ring: rgba(246, 244, 241, 0.7);
  --color-link: var(--off-white); /* tan text fails AA at 2.71:1 on this band — off-white passes */
  background: var(--color-bg);
  color: var(--color-text);
}

.band-dark--black {
  --color-bg: var(--near-black);
  background: var(--color-bg);
}