/* Solar Haven — design tokens
   Color system per brand spec (2026-05-25):
     Primary:    Solar Orange  #F97316  · Deep Charcoal #1F2937
     Secondary:  Warm Red      #EF4444  (sparingly — accents/badges)
     Supporting: White #FFFFFF · Soft Warm Bg #FFF7ED · Light Border #E5E7EB
*/
:root {
  /* ───── Primary brand ───── */
  --us-orange: #F97316;        /* "Haven", primary CTA, accent links, hover */
  --us-orange-hover: #ea6a13;
  --us-charcoal: #1F2937;      /* "Solar", body text, headings, nav */
  --us-charcoal-hover: #111827;

  /* Back-compat aliases (so existing CSS that uses --us-navy keeps working
     without a sweep — `navy` now resolves to the new charcoal) */
  --us-navy: var(--us-charcoal);
  --us-orange-deep: #d35b10;
  --us-coral: #FFB781;         /* warm tone on dark bgs */

  /* ───── Secondary accent ───── */
  --us-warm-red: #EF4444;      /* sparingly — small accents, badges, hover detail */

  /* ───── Supporting ───── */
  --us-white: #FFFFFF;
  --us-bg-warm: #FFF7ED;       /* soft warm section bg */
  --us-bg-light: var(--us-bg-warm); /* alias — replaces the cool grey */
  --us-bg-cool: #F8FAFC;       /* alternative ultra-light cool bg */
  --us-divider: #E5E7EB;       /* light borders, hairlines */
  --us-card-border: var(--us-divider);

  /* ───── Neutrals (kept on the warm grey side) ───── */
  --us-text: #4B5563;          /* body copy */
  --us-text-soft: #6B7280;     /* secondary copy / captions */
  --us-text-muted: #9CA3AF;    /* tertiary / footer-muted */
  --us-text-dim: #C4C4C4;
  --us-gray-dark: #374151;
  --us-input-bg: #FAFAFA;
  --us-input-border: #E5E7EB;
  --us-black: #000000;

  /* ───── Typography (unchanged) ───── */
  --us-font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --us-fs-body: 18px;
  --us-fs-eyebrow: 16px;
  --us-fs-section-title: 40px;
  --us-fs-hero: 68px;
  --us-lh-body: 1.56;
  --us-lh-tight: 1.1;

  /* ───── Spacing / layout (unchanged) ───── */
  --us-container: 1200px;
  --us-section-y: 80px;
  --us-radius-pill: 100px;
  --us-radius-btn: 30px;
  --us-radius-card: 16px;
  --us-radius-sm: 8px;

  /* ───── Effects ───── */
  --us-shadow-card: 0 4px 30px rgba(31, 41, 55, .08);
  --us-shadow-soft: 0 2px 12px rgba(31, 41, 55, .05);
}