/* Flux by Scale Foundry - design tokens and components (v1.0, Oct 2026)
   Drop in after the Scale Foundry site styles. Flux areas opt in with data-brand="flux". */

:root {
  --sf-deep-blue: #000033;
  --sf-navy: #17296c;
  --sf-cobalt: #003dff;
  --sf-sky: #c4f0ff;
  --sf-pink: #ffccff;
  --sf-paper: #f7f7f2;
  --sf-white: #ffffff;
  --sf-line: #e3e3da;

  --font-display: "Neue Haas Grotesk Display", "Neue Haas Grotesk", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Neue Haas Grotesk", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Lora, Georgia, serif;

  /* Scale Foundry default accent */
  --accent: var(--sf-sky);
  --accent-ink: var(--sf-deep-blue);

  --flux-mark-em: 0.27em;
  --flux-gap-em: 0.08em;
}

/* Any Flux surface: page, section, tab panel, card */
[data-brand="flux"] {
  --accent: var(--sf-pink);
  --accent-ink: var(--sf-deep-blue);
}

/* ---------- Wordmark ----------
   Use the SVG files for the logo itself (header, footer, OG, email).
   This inline version is for running text and tier names only:
   <span class="flux-word">flux<svg class="flux-dot" viewBox="0 0 10 10" aria-hidden="true"><path d="M3 0H10V7.5H7V2.5H3Z M0 2.5H3V7.5H7V10H0Z"/></svg></span>
*/
.flux-word {
  font-family: var(--font-text);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  white-space: nowrap;
  color: var(--sf-deep-blue);
}
.flux-dot {
  display: inline-block;
  width: var(--flux-mark-em);
  height: var(--flux-mark-em);
  margin-left: var(--flux-gap-em);
  vertical-align: baseline;
  fill: var(--sf-cobalt);
}
.on-dark .flux-word, .flux-word.on-dark { color: var(--sf-white); }
.on-dark .flux-dot, .flux-word.on-dark .flux-dot { fill: var(--sf-pink); }
.flux-tier { font-weight: 500; letter-spacing: -0.02em; margin-left: 0.24em; }

/* ---------- Highlight devices ---------- */
.hl {                                   /* highlighter behind key words, light grounds */
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 0.12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.on-dark .accent-text { color: var(--accent); }   /* coloured second line of a headline, dark grounds only */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.on-dark .eyebrow { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
  min-height: 44px; padding: 14px 24px; border-radius: 4px;
  font-weight: 700; font-size: 17px; text-decoration: none; box-sizing: border-box;
}
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-ink    { background: var(--sf-deep-blue); color: var(--sf-white); }
.btn-line   { border: 1px solid var(--sf-deep-blue); color: var(--sf-deep-blue); }
.btn:focus-visible { outline: 2px solid var(--sf-cobalt); outline-offset: 3px; }
.on-dark .btn:focus-visible { outline-color: var(--sf-pink); }

/* ---------- Hero tabs (Services vs Flux) ---------- */
.hero-tabs .tab[aria-selected="true"]                     { background: var(--sf-sky); color: var(--sf-deep-blue); }
.hero-tabs .tab[data-brand="flux"][aria-selected="true"]  { background: var(--sf-pink); color: var(--sf-deep-blue); }

/* ---------- Step-up badges ----------
   <span class="stepup stepup--focus" role="img" aria-label="Flux Focus"></span>
   Uses the mark geometry; colour follows currentColor. */
.stepup {
  display: inline-block; width: 1.25em; height: 1.25em; color: var(--sf-cobalt);
  background: currentColor;
  -webkit-mask: var(--stepup-mask) center / contain no-repeat;
          mask: var(--stepup-mask) center / contain no-repeat;
}
.on-dark .stepup { color: var(--sf-pink); }
.stepup--snapshot { --stepup-mask: url("./svg/step-up/flux-stepup-snapshot-mono-deepblue.svg"); }
.stepup--focus    { --stepup-mask: url("./svg/step-up/flux-stepup-focus-mono-deepblue.svg"); }
.stepup--complete { --stepup-mask: url("./svg/step-up/flux-stepup-complete-mono-deepblue.svg"); }

/* Tier emphasis: Complete is the dark card, the others sit on white */
.tier-card { background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: 12px; padding: 32px; }
.tier-card--complete { background: var(--sf-deep-blue); color: var(--sf-white); border-color: transparent; }

/* ---------- Supergraphic ----------
   Large cropped mark behind dark panels. Pink at 8-12% on Deep Blue, never behind body copy. */
.supergraphic {
  position: absolute; pointer-events: none; aspect-ratio: 1;
  fill: var(--sf-pink); fill-opacity: 0.1;
}