/* ============================================================
   GenShift Energy — Design Tokens
   Source of truth for the website refresh. Mirrors the deck system.
   Drop into the site's global stylesheet (or map into Tailwind theme).
   ============================================================ */

:root {
  /* ---- Color: surfaces (dark system) ---- */
  --gs-ink:        #0B0F0D;   /* page / hero background (near-black) */
  --gs-surface:    #141C17;   /* card / panel background */
  --gs-surface-2:  #1B2820;   /* raised panel */
  --gs-line:       #26362C;   /* hairline borders on cards */

  /* ---- Color: brand green ---- */
  --gs-green:      #149464;   /* PRIMARY brand green (matches logo mark) */
  --gs-signal:     #39E07A;   /* on-dark accent: eyebrows, key words, highlights */
  --gs-green-deep: #0E9A62;   /* gradient low end (icons/graphics) */
  --gs-green-hi:   #A6FFC8;   /* gradient high end (icons/graphics) */

  /* ---- Color: text ---- */
  --gs-text:       #F5F7F5;   /* primary text on dark */
  --gs-text-muted: #A9B6AE;   /* secondary / captions (sage) */

  /* ---- Color: warm accents = NEGATIVE semantics ---- */
  /* Green = solution/GenShift. Warm = the problem/risk being named. */
  --gs-constraint: #7E1D1D;   /* a constraint / bottleneck (e.g. "Power: Constrained") */
  --gs-constraint-text: #F2C9C9;
  --gs-risk:       #D69A4C;   /* risk / caution (e.g. "REMOVED" tags) */

  /* ---- Typography ---- */
  --gs-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --gs-w-eyebrow:  600;   /* SemiBold */
  --gs-w-headline: 700;   /* Bold  (note: NOT ExtraBold) */
  --gs-w-title:    700;   /* Bold  — card titles */
  --gs-w-body:     500;   /* Medium — body copy (one step up from Regular) */

  /* Fluid type scale (desktop reference sizes) */
  --gs-fs-eyebrow: 0.8125rem;  /* 13px, UPPERCASE, tracked */
  --gs-fs-h1:      3.0rem;     /* hero */
  --gs-fs-h2:      1.9rem;     /* section headline */
  --gs-fs-sub:     1.05rem;    /* subheadline */
  --gs-fs-body:    0.95rem;
  --gs-fs-caption: 0.72rem;

  --gs-tracking-eyebrow: 0.18em; /* letter-spacing for eyebrows */
  --gs-leading-tight: 1.15;
  --gs-leading-body:  1.5;

  /* ---- Shape & spacing ---- */
  --gs-radius:     12px;   /* cards */
  --gs-radius-sm:  8px;
  --gs-gap:        18px;   /* between cards in a row */
  --gs-pad:        clamp(20px, 4vw, 56px); /* section side padding */
}

/* ---- Core element treatments ---- */

.gs-eyebrow {           /* small green label above headlines */
  font: var(--gs-w-eyebrow) var(--gs-fs-eyebrow)/1 var(--gs-font);
  text-transform: uppercase;
  letter-spacing: var(--gs-tracking-eyebrow);
  color: var(--gs-signal);
}

.gs-headline {          /* Bold, keep to the left; break long ones into balanced lines */
  font: var(--gs-w-headline) var(--gs-fs-h2)/var(--gs-leading-tight) var(--gs-font);
  color: var(--gs-text);
}
.gs-headline .accent { color: var(--gs-signal); } /* highlight a key word in signal green */

.gs-sub {
  font: var(--gs-w-body) var(--gs-fs-sub)/var(--gs-leading-body) var(--gs-font);
  color: var(--gs-text-muted);
}

.gs-body { font: var(--gs-w-body) var(--gs-fs-body)/var(--gs-leading-body) var(--gs-font); color: var(--gs-text); }

.gs-card {
  background: var(--gs-surface);
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  padding: 24px;
}
.gs-card__title { font: var(--gs-w-title) 1.05rem/1.2 var(--gs-font); color: var(--gs-signal); }

/* Warm-accent variants (use sparingly, only to name a negative) */
.gs-card--constraint { background: var(--gs-constraint); border-color: var(--gs-constraint); }
.gs-tag--risk { color: var(--gs-risk); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }

/* Icon treatment: outlined glyph + reticle ring, filled with a green gradient.
   Deliver icons as inline SVG using this gradient: */
/* <linearGradient id="gsIcon" x1="0" y1="0" x2="0" y2="1">
     <stop offset="0"  stop-color="var(--gs-green-hi)"/>
     <stop offset=".5" stop-color="var(--gs-signal)"/>
     <stop offset="1"  stop-color="var(--gs-green-deep)"/>
   </linearGradient> */