/* ORBIT Brand Tokens — Canonical v3.1
 * Source: orbitdynamics.tech (v2.1 live) + Infinite People strategy dashboard (v3.0 extraction payload) + PSYLO Voice Canvas v6 Brain delivery (v3.1 typography evolution)
 * Last updated: 2026-04-30 · Internal S043 · ORBIT canon font evolution (Space Grotesk → Inter + Fraunces)
 * Single source of truth for all ORBIT-branded surfaces.
 *
 * Local canon:  c:/AI DEV/orbit-marketing/brand-canon/tokens.css
 * Deployed to:  /opt/orbit/www/brand/tokens.css (served at orbitdynamics.tech/brand/tokens.css)
 *
 * v3.1 additions over v3.0:
 *   - Typography evolution: --font-sans now Inter (body) · --font-display now Fraunces (display)
 *     Source: PsyloVoiceCanvas.jsx:119-120 — Brain delivery during PSYLO Voice Canvas v6 build
 *     Direction: ORBIT-LAYER canon (not PSYLO-only) — propagates to all tenant-facing ORBIT deliverables
 *
 * v3.0 additions over v2.1:
 *   - Orange as second accent (role-restricted — see orange-usage section in README)
 *   - Component tokens (panel · pill · tabbar · masthead · countdown · signal-card · gate)
 *   - Letter-spacing scale (tight · snug · wide · wider · ultra)
 *   - Tabular-nums default for numeric tokens
 *   - --font-display alias (in v3.0 same as --font-sans; in v3.1 differentiated to Fraunces)
 */

:root {
  /* ============================================================
   * COLOUR TOKENS — Dual-accent (green primary · orange role-restricted)
   * ============================================================ */

  /* Background */
  --bg: #0a0a0a;
  --bg-alt: #0e0e0e;

  /* Accent (ORBIT green — primary brand colour across ALL surfaces) */
  --accent: #00c896;
  --accent-dim: #00c8961f;     /* ~12% alpha */
  --accent-glow: #00c8960f;    /* ~6% alpha */

  /* Orange — SECOND BRAND ACCENT (promoted from role-restricted → full accent 2026-04-24)
   * Pairs with green as ORBIT's dual-accent identity.
   * Green = ORBIT state / healthy / forward motion / action.
   * Orange = contrast / antagonist / anti-positioning / friction / second-voice emphasis.
   * Used on website (Antagonist section NOT column), Airy reports, any surface that needs
   * a principled contrast to green. Never both loud at the same level — orange accents a
   * green-dominant surface, or green accents an orange-dominant surface. */
  --orange: #ea580c;
  --orange-soft: #f97316;      /* lighter variant for Airy report accents */
  --orange-dim: #ea580c1f;     /* ~12% alpha */
  --orange-glow: #ea580c0f;    /* ~6% alpha */

  /* Borders */
  --border: #ffffff14;         /* ~8% alpha white */
  --border-accent: #00c89640;  /* ~25% alpha accent */
  --border-orange: #ea580c40;  /* ~25% alpha orange — Airy reports only */

  /* Surfaces */
  --surface: #ffffff08;        /* ~3% alpha white */
  --surface-hover: #ffffff0d;  /* ~5% alpha white */
  --surface-elevated: #ffffff12; /* ~7% alpha white — for panels over darker bg */

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #ffffffb3; /* ~70% alpha */
  --text-muted: #ffffff73;     /* ~45% alpha */
  --text-faint: #ffffff40;     /* ~25% alpha */

  /* State colours — semantic encoding (LOCKED invariant)
   * healthy = forward motion · watch = holding pattern · act = needs attention · idle = no signal */
  --state-healthy: #00c896;    /* same as --accent — green encodes "good" */
  --state-watch: #f59e0b;      /* amber — encodes "holding pattern" */
  --state-act: #ef4444;        /* red — encodes "needs attention" */
  --state-idle: #ffffff40;     /* faint white — no signal */

  /* State alphas (for ring strokes — 20% of state colour) */
  --state-healthy-ring: #00c89633;
  --state-watch-ring: #f59e0b33;
  --state-act-ring: #ef444433;
  --state-idle-ring: #ffffff20;

  /* State dims (for surface tints — 12% alpha) */
  --state-healthy-dim: #00c8961f;
  --state-watch-dim: #f59e0b1f;
  --state-act-dim: #ef44441f;

  /* ============================================================
   * RADII & TRANSITIONS
   * ============================================================ */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --transition: 0.2s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
   * LAYOUT
   * ============================================================ */

  --container: 1100px;
  --container-wide: 1400px;    /* v3.0 — for dashboards and mission-control layouts */
  --pad-x: 48px;               /* 20px on mobile */
  --pad-section: 96px;         /* 64px on mobile */
  --pad-panel: 24px;
  --pad-panel-compact: 16px;

  /* ============================================================
   * TYPOGRAPHY (LOCKED)
   * ============================================================ */

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Letter-spacing scale (v3.0 — extracted from IP strategy dashboard rhythm) */
  --ls-tight: -0.035em;        /* big numerics, hero dates */
  --ls-snug: -0.015em;         /* titles */
  --ls-normal: 0em;
  --ls-wide: 0.12em;           /* pills, small caps */
  --ls-wider: 0.14em;          /* section labels */
  --ls-ultra: 0.20em;          /* masthead kickers, uppercase eyebrows */

  /* Hero date pattern — milestone dates as primary information */
  --hero-date-size: 48px;
  --hero-date-weight: 700;
  --hero-date-spacing: -0.035em;
  --hero-date-glow: 0 0 24px rgba(0, 200, 150, 0.35);

  /* Big-numeric gate — phase counters, big KPIs */
  --big-num-size: 44px;
  --big-num-weight: 500;
  --big-num-spacing: -0.035em;
  --big-num-hard-glow: 0 0 20px rgba(0, 200, 150, 0.4);
  --big-num-soft: var(--text-faint);

  /* ============================================================
   * COMPONENT TOKENS (v3.0 — new)
   * ============================================================ */

  /* Panel */
  --panel-bg: var(--surface);
  --panel-border: var(--border);
  --panel-radius: var(--radius-md);
  --panel-blur: 6px;

  /* Pill */
  --pill-padding: 4px 10px;
  --pill-font-size: 10px;
  --pill-letter-spacing: var(--ls-wide);
  --pill-radius: var(--radius-pill);

  /* Tabbar */
  --tabbar-bg: rgba(10, 10, 10, 0.85);
  --tabbar-blur: 14px;
  --tabbar-saturate: 140%;
  --tabbar-padding-y: 16px 20px 14px;

  /* Masthead */
  --masthead-padding: 20px 32px;
  --masthead-border-bottom: 1px solid var(--border);

  /* Countdown tile */
  --countdown-value-size: 24px;
  --countdown-value-spacing: -0.03em;
  --countdown-label-size: 9px;
  --countdown-label-spacing: var(--ls-ultra);

  /* Signal card */
  --signal-card-min-height: 160px;
  --signal-card-padding: 20px;

  /* Command palette (⌘K) */
  --cmd-button-padding: 9px 13px;
  --cmd-button-radius: var(--radius-sm);
}

/* ============================================================
 * SIGNATURE MOTION — orbitSpin variants
 * Direction encodes semantics: clockwise = forward, anti-clockwise = holding
 * ============================================================ */

@keyframes orbitSpin {
  0%   { transform: rotate(0deg) translate(10px); }
  100% { transform: rotate(360deg) translate(10px); }
}

@keyframes orbitSpin-healthy {
  0%   { transform: rotate(0deg) translate(var(--orbit-r, 14px)); }
  100% { transform: rotate(360deg) translate(var(--orbit-r, 14px)); }
}

@keyframes orbitSpin-act {
  0%   { transform: rotate(0deg) translate(var(--orbit-r, 14px)); }
  100% { transform: rotate(360deg) translate(var(--orbit-r, 14px)); }
}

@keyframes orbitSpin-watch {
  /* Anti-clockwise — holding-pattern semantic (LOCKED INVARIANT) */
  0%   { transform: rotate(0deg) translate(var(--orbit-r, 14px)); }
  100% { transform: rotate(-360deg) translate(var(--orbit-r, 14px)); }
}

/* v3.0 — atmosphere drift for fixed-position deployments */
@keyframes atmosphereDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%  { transform: translate(40px, -30px) scale(1.08); opacity: 0.7; }
  100% { transform: translate(-20px, 40px) scale(0.95); opacity: 0.4; }
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50%      { transform: translate(40px, -30px); opacity: 0.6; }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50%      { transform: translate(-50px, 40px); opacity: 0.5; }
}

/* ============================================================
 * BACKGROUND ATMOSPHERE — "Living Black" four-layer composite
 * Apply .orbit-atmosphere to body or hero containers
 * Alt v3.0 pattern: .atmo-base + .atmo-drift-1/.atmo-drift-2 + .atmo-noise (fixed-position variant)
 * ============================================================ */

.orbit-atmosphere {
  position: relative;
  background: linear-gradient(180deg, #0b0c0b 0%, #080a09 50%, #0a0b0a 100%);
  overflow: hidden;
}

.orbit-atmosphere::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px circle at 85% 15%, rgba(0,200,150,0.06) 0%, transparent 60%),
    radial-gradient(900px circle at 15% 85%, rgba(0,200,150,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.orbit-atmosphere::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.orbit-atmosphere .drift-1,
.orbit-atmosphere .drift-2 {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  filter: blur(80px);
  background: rgba(0,200,150,0.08);
  pointer-events: none;
  z-index: 0;
}
.orbit-atmosphere .drift-1 {
  top: 10%; left: 20%;
  animation: orbDrift1 24s ease-in-out infinite alternate;
}
.orbit-atmosphere .drift-2 {
  bottom: 15%; right: 15%;
  animation: orbDrift2 32s ease-in-out infinite alternate-reverse;
}

.orbit-atmosphere > *:not(.drift-1):not(.drift-2) {
  position: relative;
  z-index: 1;
}

/* v3.0 alternative — fixed-position atmosphere (for dashboard / mission-control layouts) */
.atmo-base {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 85% 0%, var(--accent-glow) 0%, transparent 45%),
    radial-gradient(ellipse at 15% 100%, rgba(0,200,150,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.012) 0%, transparent 70%),
    linear-gradient(180deg, #0b0c0b 0%, #080a09 50%, #0a0b0a 100%);
}
.atmo-drift-1 {
  position: fixed; top: 20%; right: 10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none; z-index: 0; opacity: 0.5;
  animation: atmosphereDrift 24s ease-in-out infinite alternate;
  filter: blur(40px);
}
.atmo-drift-2 {
  position: fixed; bottom: 15%; left: 5%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,200,150,0.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0; opacity: 0.6;
  animation: atmosphereDrift 32s ease-in-out infinite alternate-reverse;
  filter: blur(30px);
}
.atmo-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ============================================================
 * ORBIT STATUS COMPONENT — state-bound ring + orbiting dot
 * Usage: <div class="orbit-status" data-state="healthy" style="--orbit-r: 14px;">
 *          <span class="orbit-status-dot"></span>
 *        </div>
 * ============================================================ */

.orbit-status {
  position: relative;
  display: inline-block;
  width: calc(var(--orbit-r, 14px) * 2 + 8px);
  height: calc(var(--orbit-r, 14px) * 2 + 8px);
}
.orbit-status::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ring-color, var(--state-idle-ring));
  pointer-events: none;
}
.orbit-status-dot {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dot-color, var(--state-idle));
  top: 50%; left: 50%;
  margin-top: -2.5px; margin-left: -2.5px;
  transform-origin: center;
  box-shadow: 0 0 calc(var(--orbit-r, 14px) * 1.8) var(--dot-color, var(--state-idle));
}

.orbit-status[data-state="healthy"] { --ring-color: var(--state-healthy-ring); --dot-color: var(--state-healthy); }
.orbit-status[data-state="healthy"] .orbit-status-dot { animation: orbitSpin-healthy 2.4s linear infinite; }

.orbit-status[data-state="watch"] { --ring-color: var(--state-watch-ring); --dot-color: var(--state-watch); }
.orbit-status[data-state="watch"] .orbit-status-dot { animation: orbitSpin-watch 1.8s linear infinite; }

.orbit-status[data-state="act"] { --ring-color: var(--state-act-ring); --dot-color: var(--state-act); }
.orbit-status[data-state="act"] .orbit-status-dot { animation: orbitSpin-act 1.2s linear infinite; }

.orbit-status[data-state="idle"] { --ring-color: var(--state-idle-ring); --dot-color: var(--state-idle); }
.orbit-status[data-state="idle"] .orbit-status-dot {
  transform: translate(0, calc(-1 * var(--orbit-r, 14px)));
  margin-top: -2.5px;
}

/* ============================================================
 * CORNER TICKS — instrument-panel decorator
 * ============================================================ */

.with-corner-ticks {
  position: relative;
}
.with-corner-ticks::before,
.with-corner-ticks::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
.with-corner-ticks::before {
  top: 4px; left: 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.with-corner-ticks::after {
  bottom: 4px; right: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
}

/* ============================================================
 * HERO DATE — milestone date as primary information
 * ============================================================ */

.hero-date {
  font-family: var(--font-sans);
  font-weight: var(--hero-date-weight);
  font-size: var(--hero-date-size);
  letter-spacing: var(--hero-date-spacing);
  color: var(--accent);
  text-shadow: var(--hero-date-glow);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * TYPOGRAPHY UTILITIES (v3.0)
 * ============================================================ */

.eyebrow {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
}

.label-small {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.big-num {
  font-size: var(--big-num-size);
  font-weight: var(--big-num-weight);
  letter-spacing: var(--big-num-spacing);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.big-num.hard { color: var(--accent); text-shadow: var(--big-num-hard-glow); }
.big-num.soft { color: var(--big-num-soft); }

.num-tabular {
  font-variant-numeric: tabular-nums;
}