/* ============================================================
   PERMIAN WELL CONTROL — DESIGN TOKENS + BASE
   "Calm under pressure." Industrial steel + a single ember act-color.
   Linked by every page.
   ============================================================ */
:root {
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-sm: 4px; --r: 8px; --r-lg: 12px;

  --maxw: 1140px;
  --measure: 66ch;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --ease: cubic-bezier(.2, .6, .2, 1);

  /* ACCENT — the "act" color. Reserved almost exclusively for the call action. */
  --ember: #F2842B;
  --ember-bright: #FF9637;
  --ember-ink: #1B1106;

  /* response-band ramp — "closer = faster", cool, NOT a red-alert ramp */
  --band-a: #67C6DC; --band-b: #3E9BC0; --band-c: #2F6E9E; --band-d: #2C4A77;
}

/* ---- DARK (default): deep graphite steel ---- */
:root, [data-theme="dark"] {
  --bg: #0F1519;
  --bg-2: #161D22;
  --bg-3: #1E262C;
  --line: #2A343B;
  --line-strong: #3A464E;
  --text: #EBEFF1;
  --text-2: #AEB8BE;
  --text-3: #7C878E;
  --steel: #3E94B5;
  --scrim: rgba(9,13,16,.72);
  --shadow: 0 18px 50px -20px rgba(0,0,0,.65);
  --card-shadow: 0 1px 0 rgba(255,255,255,.02);
}

/* ---- DAYLIGHT (high-vis): sun-bleached caliche ---- */
[data-theme="light"] {
  --bg: #F2EFE9;
  --bg-2: #FBFAF7;
  --bg-3: #E8E3D9;
  --line: #D9D2C5;
  --line-strong: #C2BAAA;
  --text: #1A2228;
  --text-2: #4D5862;
  --text-3: #6F7A82;
  --steel: #2E7D9E;
  --scrim: rgba(9,13,16,.55);
  --shadow: 0 18px 50px -24px rgba(40,30,15,.28);
  --card-shadow: 0 1px 2px rgba(40,30,15,.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }
.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ember);
}
.section { padding-block: var(--section-y); }

/* entrance — subtle, controlled, hero only; content is ALWAYS visible by default */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { animation: heroIn .7s var(--ease) both; }
  .hero-content > *:nth-child(1) { animation-delay: 0s; }
  .hero-content > *:nth-child(2) { animation-delay: .06s; }
  .hero-content > *:nth-child(3) { animation-delay: .12s; }
  .hero-content > *:nth-child(4) { animation-delay: .18s; }
  .hero-content > *:nth-child(5) { animation-delay: .24s; }
  .page-hero-in > * { animation: heroIn .7s var(--ease) both; }
  .page-hero-in > *:nth-child(2) { animation-delay: .05s; }
  .page-hero-in > *:nth-child(3) { animation-delay: .1s; }
  .page-hero-in > *:nth-child(4) { animation-delay: .15s; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ember); color: var(--ember-ink);
  padding: 10px 16px; border-radius: var(--r); font-weight: 700; transition: top .2s; text-decoration: none; }
.skip:focus { top: 12px; }

#root { min-height: 100vh; }
.app-loading { display: grid; place-items: center; min-height: 100vh; color: var(--text-3); font-family: var(--font-body); }