/* ==========================================================================
   Contrivance Inc. — shared brand tokens for contrivancelabs.com + cohlta.app
   Design system read off the giga.com reference; prismatic mark validated
   against the Cohlta PSD (docs/brand-and-sites/phase-a-brand-and-web.md).
   ========================================================================== */

:root {
  /* ground + text */
  --bg:        #131112;
  --bg-card:   #1a1819;
  --line:      rgba(252, 250, 251, 0.10);
  --line-soft: rgba(252, 250, 251, 0.06);
  --ink:       #FCFAFB;
  --ink-2:     #9B999A;
  --ink-3:     #8A8788;   /* 5.29:1 on --bg; #6B6869 was 3.41 and failed AA at 11px */
  /* the one accent — used TINY: eyebrow dots, icon strokes. never a fill */
  --accent:    #CB4632;

  /* type */
  /* owner ruling 2026-09-02: no serif on either site. Headings use the body face;
     sans sets wider than a light serif, so the h2 scale is tightened to match. */
  --f-display: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-sans:    "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-mark:    "Poppins", "Montserrat", "Futura", sans-serif;   /* the COHLTA wordmark only */

  /* scale */
  --fs-hero:   clamp(2.2rem, 5vw, 3.7rem);
  --fs-h2:     clamp(1.7rem, 3.3vw, 2.55rem);
  --fs-h3:     1.35rem;
  --fs-body:   1.0625rem;
  --fs-small:  .9375rem;
  --fs-micro:  .6875rem;

  --measure:   62ch;
  --radius:    18px;
  --pill:      999px;
  --gutter:    clamp(18px, 4vw, 56px);
  --section:   clamp(88px, 12vw, 160px);
}

/* ---------- micro-labels: mono, uppercase, letterspaced, accent dot ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}

/* ---------- the prismatic mark ----------
   56° from horizontal, bottom-left → top-right == CSS 34deg.
   Red plateau 0–26%, one spectrum cycle 26–74% (hue 360→0), red plateau 74–100%.
   Centred plus-lattice as an SVG tile, screened over the gradient.
   Apply to a span holding the letters that carry the treatment (e.g. "AI"). */
.prism {
  /* lattice period scales with the type: PSD = 7px on an 88px glyph ≈ 6% of font-size.
     Clamp so tiny type gets a shimmer, not a grid. */
  --prism-tile: clamp(2px, .06em, 12px);
  /* one plus per tile, sized to the PSD proportion (plus = 43% of period, arm = 14%);
     the CENTRED sublattice is the same tile drawn again, offset by half a period. */
  --prism-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><g fill='white' fill-opacity='.42'><rect x='6' y='4' width='2' height='6'/><rect x='4' y='6' width='6' height='2'/></g></svg>");
  background-image:
    var(--prism-plus),
    var(--prism-plus),
    linear-gradient(34deg,
      #e60000 0%,  #e60000 26%,
      #ff00e6 34%, #2a00ff 42%, #00e6ff 50%, #00ff33 58%, #ffe600 66%, #e60000 74%,
      #e60000 100%);
  /* gradient confined to the cap-height band of the 1em box; ends are both red so the repeat is seamless */
  background-size: var(--prism-tile) var(--prism-tile), var(--prism-tile) var(--prism-tile), 100% 72%;
  background-position: 0 0, calc(var(--prism-tile) / 2) calc(var(--prism-tile) / 2), 0 55%;
  background-blend-mode: screen, screen, normal;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: brightness(.74) saturate(1.05);
}

/* ---------- the COHLTA wordmark lockup ---------- */
.wordmark {
  font-family: var(--f-mark); font-weight: 500;
  letter-spacing: .32em; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: .15em; line-height: 1;
}
.wordmark .prism { letter-spacing: .08em; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--f-sans); font-size: var(--fs-small); font-weight: 500;
  padding: .8em 1.35em; border-radius: var(--pill); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5em; line-height: 1;
  transition: transform .15s ease, background .15s ease;
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(252,250,251,.05); }

/* ---------- hairline rules ---------- */
.rule-v { border-left: 1px solid var(--line); }
.rule-h { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}