/* tokens.css — JRG Solar Solutions design vocabulary.
   Single source of truth. Everything downstream consumes these only. */

:root {
  /* ---- Color: white base, deep navy, solar gold, neutral grays ---- */
  --color-navy-900: #081f38;
  --color-navy-800: #0b2a4a;
  --color-navy-700: #123a63;
  --color-navy-100: #dce7f2;
  --color-gold-500: #f5b301;   /* accent — restraint budget applies */
  --color-gold-600: #c78f00;   /* AA-safe gold on white for text/borders */
  --color-white: #ffffff;
  --color-gray-050: #f6f8fa;
  --color-gray-200: #e2e8ee;
  --color-gray-500: #5b6b7b;   /* 4.9:1 on white */
  --color-gray-700: #33414f;
  --color-ink: #16222e;        /* primary body text, 14.6:1 on white */
  --color-error: #b3261e;
  --color-success: #1d6f42;

  /* Semantic aliases */
  --bg-page: var(--color-white);
  --bg-band: var(--color-navy-800);
  --bg-tint: var(--color-gray-050);
  --text-body: var(--color-ink);
  --text-muted: var(--color-gray-500);
  --text-on-dark: #f2f6fa;
  --text-on-dark-muted: #b9c8d6;
  --accent: var(--color-gold-500);
  --accent-text: var(--color-gold-600);
  --hairline: var(--color-gray-200);

  /* ---- Type ---- */
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --text-caption: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);
  --text-h3: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem);
  --text-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  --text-h1: clamp(2rem, 1.6rem + 2vw, 2.875rem);
  --text-hero: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem);
  --track-display: -0.02em;
  --track-h3: -0.01em;
  --leading-tight: 1.12;
  --leading-body: 1.65;
  --measure: 65ch;

  /* ---- Spacing (4:1 section-to-group rhythm) ---- */
  --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-12: 4.5rem;
  --space-16: clamp(4rem, 3rem + 5vw, 7rem);   /* between-section */
  --space-20: clamp(5rem, 4rem + 6vw, 9rem);   /* hero breathing */

  /* ---- Shape ---- */
  --radius-control: 0.5rem;
  --radius-card: 1rem;

  /* ---- Elevation (2 levels + nav glass) ---- */
  --shadow-rest: 0 1px 3px rgba(8, 31, 56, 0.08), 0 4px 16px rgba(8, 31, 56, 0.06);
  --shadow-hover: 0 4px 8px rgba(8, 31, 56, 0.10), 0 12px 32px rgba(8, 31, 56, 0.12);
  --nav-glass-bg: rgba(255, 255, 255, 0.82);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  /* ---- Z-layers ---- */
  --z-nav: 100;
  --z-skip: 200;
  --z-callbar: 90;

  /* ---- Layout / breakpoints (reference: 40rem phone→tablet,
     64rem tablet→laptop, 90rem large) ---- */
  --container-max: 72rem;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* Signature: the Gold Meridian */
  --meridian-height: 3px;
  --meridian-width: 3.5rem;
}