/* ===================================================================
   Vrystaat Solar Distributors — base.css
   Design tokens, reset, typography, utilities
   =================================================================== */

:root {
  /* Brand palette (derived from logo) */
  --orange: #F5820A;
  --amber: #F5A623;
  --orange-deep: #D8600A;
  --navy: #0A2540;
  --navy-700: #0D2F52;
  --ink: #0D1117;
  --green: #3F7D3B;
  --green-600: #35692F;

  --white: #FFFFFF;
  --off-white: #F8FAFC;
  --grey-soft: #E2E8F0;
  --grey-200: #EEF2F7;
  --slate: #334155;
  --muted: #64748B;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--off-white);
  --text: #1B2735;
  --text-soft: var(--muted);
  --border: var(--grey-soft);

  /* Gradients */
  --grad-solar: linear-gradient(135deg, #F5A623 0%, #F5820A 55%, #D8600A 100%);
  --grad-navy: linear-gradient(160deg, #0D2F52 0%, #0A2540 60%, #081B30 100%);

  /* Typography */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Sora", var(--font-body);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(2, 6, 23, .06), 0 1px 3px rgba(2, 6, 23, .05);
  --sh-md: 0 8px 24px rgba(2, 6, 23, .08);
  --sh-lg: 0 20px 48px rgba(2, 6, 23, .14);
  --sh-orange: 0 10px 28px rgba(245, 130, 10, .35);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 74px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .5s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.14; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
p { color: var(--slate); }
strong { color: var(--navy); font-weight: 600; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange-deep);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad-solar); border-radius: 2px; }

.section-lead { color: var(--text-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 60ch; }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }