/* ==========================================================================
   StaffiQ — Shared background system
   The same background language as TaskPulse: a warm off white page with a
   live productivity canvas behind everything (drifting rounded cards,
   checkmarks and a connected team mesh that reacts to the cursor), plus a
   light and dark mode built on tokens.

   Loaded after styles.css and lens.css so it can retone the hero, which was
   previously a dark evergreen block, onto the shared cream page.
   ========================================================================== */

:root, [data-sq-theme="light"] {
  --sq-page:      #F7F4EC;
  --sq-page-2:    #EFEAE0;
  --sq-surface:   #FFFFFF;
  --sq-surface-90:rgba(255, 255, 255, 0.92);
  --sq-ink:       #0A1F17;
  --sq-ink-2:     #24352D;
  --sq-muted:     #566259;
  --sq-line:      rgba(10, 31, 23, 0.13);
  --sq-glass:     rgba(255, 255, 255, 0.66);
  --sq-glass-line:rgba(10, 31, 23, 0.14);
  --sq-brand:     #004331;
  --sq-brand-soft:#0A5B44;
  --sq-lime:      #7FAF12;
  --sq-lime-bright:#C6F24E;
  --sq-tint:      #E6F4F0;
  --sq-shadow:    0 18px 48px rgba(10, 31, 23, 0.10);
  --sq-canvas-op: 0.62;
}

[data-sq-theme="dark"] {
  --sq-page:      #0B1512;
  --sq-page-2:    #0F1D18;
  --sq-surface:   #16241E;
  --sq-surface-90:rgba(22, 36, 30, 0.92);
  --sq-ink:       #EEF5F1;
  --sq-ink-2:     #D6E4DD;
  --sq-muted:     #9DB0A6;
  --sq-line:      rgba(255, 255, 255, 0.11);
  --sq-glass:     rgba(22, 36, 30, 0.66);
  --sq-glass-line:rgba(198, 242, 78, 0.22);
  --sq-brand:     #8FE9C4;
  --sq-brand-soft:#4FC79B;
  --sq-lime:      #C6F24E;
  --sq-lime-bright:#D8F97E;
  --sq-tint:      rgba(143, 233, 196, 0.13);
  --sq-shadow:    0 20px 54px rgba(0, 0, 0, 0.55);
  --sq-canvas-op: 0.5;
}

html { color-scheme: light }
[data-sq-theme="dark"] { color-scheme: dark }

body {
  background:
    radial-gradient(120% 74% at 10% -8%, var(--sq-page-2) 0%, transparent 58%),
    radial-gradient(96% 68% at 100% 106%, var(--sq-tint) 0%, transparent 62%),
    var(--sq-page) !important;
  color: var(--sq-ink);
  transition: background 1.5s ease, color 1.5s ease;
}

/* ── The live canvas, fixed behind every section ───────────────────────── */
#sq-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
  opacity: var(--sq-canvas-op);
  transition: opacity 1.5s ease;
}
.site-header, main, .site-footer, .sticky-cta { position: relative; z-index: 1 }

/* Sections become transparent so the canvas reads through the whole page.
   The deliberate dark evergreen bands are the exception: they stay dark, and
   everything inside them keeps its light on dark colouring. */
.bg-cream, .bg-sand, .bg-paper,
.section:not(.bg-evergreen), .section-tight:not(.bg-evergreen) { background: transparent !important }
.bg-evergreen { background: var(--evergreen-800) !important; color: #EAF3EE }
.bg-evergreen h1, .bg-evergreen h2, .bg-evergreen h3,
.bg-evergreen .section-head h2 { color: #FFFFFF }
.bg-evergreen p, .bg-evergreen .lead, .bg-evergreen .section-head p,
.bg-evergreen li { color: rgba(234, 243, 238, 0.82) }
.bg-evergreen .eyebrow, .bg-evergreen .eyebrow.on-dark { color: var(--lime) }
.bg-evergreen .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12) }
.bg-evergreen .card h3 { color: #FFFFFF }
.bg-evergreen .card p { color: rgba(234, 243, 238, 0.8) }
.bg-evergreen .btn-ghost.on-dark { color: #EAF3EE; border-color: rgba(255, 255, 255, 0.26) }
.bg-evergreen a { color: #EAF3EE }

/* Intentionally dark cards keep their own colouring wherever they appear. */
.card.dark { background: var(--evergreen-800); border-color: rgba(255, 255, 255, 0.10) }
.card.dark h3 { color: #FFFFFF }
.card.dark p { color: rgba(220, 235, 228, 0.86) }
.site-header { background: var(--sq-surface-90) !important; border-bottom: 1px solid var(--sq-line) }
[data-sqp-scrolled="on"] .site-header { background: var(--sq-surface-90) !important }
.site-header .brand-name { color: var(--sq-ink) }
.site-header .nav-links a { color: var(--sq-muted) }
.site-header .nav-links a:hover { color: var(--sq-brand) }

/* ── Hero retoned onto the cream page ──────────────────────────────────── */
.lens-hero {
  background: transparent !important;
  color: var(--sq-ink);
  border-bottom: 1px solid var(--sq-line);
}
.lens-hero::before { opacity: .16 }
.lens-copy h1 { color: var(--sq-ink) }
.lens-copy h1 .hl { color: var(--sq-brand) }
.lens-copy h1 .hl::after { background: var(--sq-lime-bright); opacity: .34 }
.lens-lead { color: var(--sq-muted) }
.lens-pill {
  background: var(--sq-tint); border-color: var(--sq-glass-line); color: var(--sq-brand);
}
.lens-proof { color: var(--sq-muted) }
.lens-proof .check { color: var(--sq-lime) }
.lens-actions .btn-lime { background: var(--sq-brand); color: #FFFFFF }
.lens-actions .btn-lime:hover { background: var(--sq-brand-soft) }
[data-sq-theme="dark"] .lens-actions .btn-lime { color: #04231B }
.lens-actions .btn-line {
  border-color: var(--sq-glass-line); color: var(--sq-brand); background: var(--sq-glass);
}
.lens-actions .btn-line:hover { background: var(--sq-tint) }

/* ── Panel, readout and meter on light ─────────────────────────────────── */
.lens-panel {
  background: var(--sq-glass) !important;
  border-color: var(--sq-glass-line) !important;
  box-shadow: var(--sq-shadow) !important;
}
.lens-panel__bar { color: var(--sq-muted) }
.lens-dossier {
  background: var(--sq-tint) !important;
  border-color: var(--sq-glass-line) !important;
}
.lens-dossier[data-open="true"] { border-color: var(--sq-lime) !important }
.lens-dossier__who { color: var(--sq-ink) }
.lens-dossier__role { color: var(--sq-muted) }
.lens-dossier__gap { color: var(--sq-ink-2) }
.lens-dossier__do { border-top-color: var(--sq-glass-line); color: var(--sq-ink-2) }
.lens-dossier__do span:first-child { color: var(--sq-lime) }
.lens-meter__track { background: var(--sq-line) }
.lens-meter__fill { background: linear-gradient(90deg, var(--sq-brand), var(--sq-lime-bright)) }
.lens-meter__label { color: var(--sq-muted) }
.lens-meter__label b { color: var(--sq-brand) }
.lens-hint { color: var(--sq-muted) }
.lens-note { color: var(--sq-muted); opacity: .72 }

/* ── Floating name pills on light ──────────────────────────────────────── */
.lens-node::before {
  background: var(--sq-surface);
  border-color: var(--sq-glass-line);
  box-shadow: var(--sq-shadow);
}
.lens-node__name { color: color-mix(in srgb, var(--sq-ink) calc(35% + var(--near, 0) * 65%), transparent) }
.lens-node__role { color: color-mix(in srgb, var(--sq-brand) calc(var(--near, 0) * 88%), transparent) }
.lens-node__avatar { background: var(--sq-tint); color: var(--sq-ink) }
.lens-node[data-live="true"]::before { border-color: var(--sq-lime) }
.lens-glow {
  background: radial-gradient(170px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(198, 242, 78, .28) 0%, rgba(0, 67, 49, .1) 42%, transparent 68%);
}
.lens-ring { border-color: rgba(0, 67, 49, .3) }
.lens-sweep { background: linear-gradient(90deg, transparent, rgba(0, 67, 49, .08), transparent) }
.lens-mesh line { stroke: rgba(0, 67, 49, .18) }
.lens-wire { stroke: var(--sq-lime) }
[data-sq-theme="dark"] .lens-mesh line { stroke: rgba(143, 233, 196, .22) }
[data-sq-theme="dark"] .lens-ring { border-color: rgba(198, 242, 78, .4) }

/* ── Body sections, cards and footer follow the tokens ─────────────────── */
.card { background: var(--sq-surface); border-color: var(--sq-line); color: var(--sq-ink) }
.card h3 { color: var(--sq-ink) }
.card p { color: var(--sq-muted) }
.section-head h2 { color: var(--sq-ink) }
.section-head .lead, .section-head p { color: var(--sq-muted) }
.eyebrow { color: var(--sq-brand) }
.site-footer { background: var(--sq-surface) !important; border-top: 1px solid var(--sq-line) }

/* ── Theme control, matching TaskPulse ─────────────────────────────────── */
.sq-theme { position: fixed; right: 1rem; bottom: 1rem; z-index: 1100; display: flex; align-items: center; gap: .6rem }
.sq-theme__btn { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0 }
.sq-theme__track {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem .6rem; border-radius: 999px;
  background: var(--sq-surface-90); border: 1px solid var(--sq-line);
  box-shadow: var(--sq-shadow); color: var(--sq-muted); font-size: 15px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 1.5s cubic-bezier(.16,1,.3,1), box-shadow 1.5s, border-color 1.5s;
}
.sq-theme__btn:hover .sq-theme__track { transform: translateY(-3px); border-color: var(--sq-lime) }
.sq-theme__knob {
  position: absolute; top: .36rem; left: .42rem; width: 1.32rem; height: 1.32rem; border-radius: 999px;
  background: linear-gradient(150deg, var(--sq-lime-bright), var(--sq-lime));
  box-shadow: 0 3px 10px rgba(198, 242, 78, .5);
  transition: transform 1.5s cubic-bezier(.68,-.4,.27,1.4);
}
[data-sq-theme="dark"] .sq-theme__knob { transform: translateX(1.62rem) }
.sq-theme__hint {
  order: -1; max-width: 15rem; padding: .6rem .8rem; border-radius: 14px;
  font-size: .72rem; font-weight: 600; line-height: 1.45; color: var(--sq-ink);
  background: var(--sq-surface-90); border: 1px solid var(--sq-lime);
  box-shadow: var(--sq-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none;
  transition: opacity 1.5s ease, transform 1.5s cubic-bezier(.16,1,.3,1);
}
.sq-theme__hint strong { display: block; color: var(--sq-brand); font-weight: 800; margin-bottom: .15rem }
.sq-theme__hint[data-open="true"] { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  #sq-canvas { display: none }
  .sq-theme__knob { transition: none }
}


/* ── The lit core on the cream page ────────────────────────────────────── */
.lens-core {
  background:
    radial-gradient(120% 90% at var(--cx, 50%) var(--cy, 45%),
      rgba(127, 175, 18, calc(0.08 + var(--heat, 0) * 0.26)) 0%, transparent 62%),
    radial-gradient(90% 80% at 70% 100%, rgba(0, 67, 49, 0.06) 0%, transparent 60%) !important;
}
.lens-core__halo {
  background: radial-gradient(circle,
    rgba(198, 242, 78, calc(0.34 + var(--heat, 0) * 0.46)) 0%,
    rgba(0, 67, 49, 0.1) 42%, transparent 70%) !important;
}
.lens-core__ring { border-color: rgba(0, 67, 49, calc(0.16 + var(--heat, 0) * 0.4)) }
.lens-core__ring--slow { border-color: rgba(127, 175, 18, calc(0.14 + var(--heat, 0) * 0.34)) }
.lens-core__sheen { background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.72) 50%, transparent 66%) }
.lens-panel__tag { color: var(--sq-muted) }
[data-sq-theme="dark"] .lens-core__ring { border-color: rgba(198, 242, 78, calc(0.22 + var(--heat, 0) * 0.55)) }

/* ── Animated number counters ────────────────────────────────────────────
   Ready made styling for [data-target] stat blocks (see main.js for the
   count up engine). Not used on any page yet — no numeric stat has been
   supplied — but the markup, once added, is:
     <div class="hero-stat"><div class="val" data-target="98">0%</div><div class="lbl">Label</div></div>
*/
.hero-stats { display: flex; flex-wrap: wrap; gap: 3rem; justify-content: center }
.hero-stat { text-align: center }
.hero-stat .val { font-size: 2.6rem; font-weight: 900; letter-spacing: -0.02em; color: var(--sq-brand) }
.hero-stat .lbl { font-size: 0.8rem; color: var(--sq-muted); margin-top: 0.2rem; font-weight: 500 }