/* GENTOO-DECISION-QUEUE-CHASSIS-001 — Layer 1: design tokens.
   Single source of truth for the Gentoo Logic visual chassis.
   Exports custom properties only — no selectors with side-effects, no resets.
   Imported by every surface that mounts a chassis component. */
:root {
  color-scheme: light;

  /* Surfaces */
  --gl-bg: #fafafa;
  --gl-surface: #ffffff;
  --gl-surface-2: #f4f4f5;
  --gl-surface-3: #ececef;
  --gl-border: #e4e4e7;
  --gl-border-strong: #d4d4d8;

  /* Text */
  --gl-text: #18181b;
  --gl-text-2: #52525b;
  --gl-text-3: #71717a;
  --gl-text-4: #a1a1aa;

  /* Brand (Gentoo blue — canonical per matrix #117, ratified 2026-05-05) */
  --gl-brand: #1BA8D8;        /* gentoo-blue */
  --gl-brand-soft: #D6F0F9;   /* gentoo-blue at ~85% lightness */
  --gl-brand-strong: #0D2A4A; /* gentoo-navy */
  --gl-brand-grey: #4E6370;   /* gentoo-grey */
  --gl-brand-paper: #F5F7F9;  /* gentoo-paper */

  /* Priority */
  --gl-p0: #b91c1c;   --gl-p0-bg: #fee2e2;
  --gl-p1: #c2410c;   --gl-p1-bg: #ffedd5;
  --gl-p2: #a16207;   --gl-p2-bg: #fef3c7;
  --gl-p3: #4d7c0f;   --gl-p3-bg: #ecfccb;

  /* Status */
  --gl-stuck: #b91c1c;     --gl-stuck-bg: #fee2e2;
  --gl-gated: #a16207;     --gl-gated-bg: #fef3c7;
  --gl-inflight: #1d4ed8;  --gl-inflight-bg: #dbeafe;
  --gl-done: #15803d;      --gl-done-bg: #dcfce7;
  --gl-stale: #71717a;     --gl-stale-bg: #f4f4f5;

  /* Radii + shadow */
  --gl-radius: 8px;
  --gl-radius-sm: 6px;
  --gl-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --gl-shadow: 0 2px 8px rgba(0,0,0,0.06);

  /* Fonts */
  --gl-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --gl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Visual-life v1 (COCKPIT-VISUAL-LIFE-001) */
  --gl-pulse-stagger: 0.18s;

  /* ── Pop primitives (POP-001) — focal/action elements only: CTAs, interactive
     cards, status dots. Define ONCE here; apply across surfaces via the utility
     classes below or by referencing the vars. ── */
  --gl-grad-brand: linear-gradient(135deg, #0891B2 0%, #1BA8D8 100%);
  --gl-grad-spark: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --gl-glow-brand: 0 10px 22px -8px rgba(27,168,216,.42);
  --gl-glow-brand-hi: 0 16px 34px -8px rgba(27,168,216,.58);
  --gl-glow-spark: 0 10px 22px -8px rgba(236,72,153,.40);
  --gl-glow-spark-hi: 0 16px 34px -8px rgba(236,72,153,.56);
  --gl-lift: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .22s ease;

  /* Pebble account stripes. Canonicalized here so catch-up rows do not depend
     on per-site token drift. */
  --gl-account-r: var(--gl-brand);
  --gl-account-p: #7c3aed;
  --gl-account-c: var(--gl-brand-strong);
}

/* ── Pop utilities (POP-001) — shared focal-element styling, both surfaces ── */
.gl-pop-cta { background: var(--gl-grad-brand); color: #fff; border: none; box-shadow: var(--gl-glow-brand); transition: var(--gl-lift); cursor: pointer; }
.gl-pop-cta:hover { transform: scale(1.04); box-shadow: var(--gl-glow-brand-hi); filter: none; }
.gl-pop-cta.spark { background: var(--gl-grad-spark); box-shadow: var(--gl-glow-spark); }
.gl-pop-cta.spark:hover { box-shadow: var(--gl-glow-spark-hi); }
.gl-pop-lift { transition: var(--gl-lift); }
.gl-pop-lift:hover { transform: translateY(-2px); box-shadow: var(--gl-glow-brand); }
.gl-pop-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gl-brand, #1BA8D8); box-shadow: 0 0 0 0 rgba(27,168,216,.5); animation: gl-pop-pulse 2.2s infinite; }
@keyframes gl-pop-pulse { 0% { box-shadow: 0 0 0 0 rgba(27,168,216,.5); } 70% { box-shadow: 0 0 0 7px rgba(27,168,216,0); } 100% { box-shadow: 0 0 0 0 rgba(27,168,216,0); } }
@media (prefers-reduced-motion: reduce) {
  .gl-pop-cta:hover, .gl-pop-lift:hover { transform: none; }
  .gl-pop-dot { animation: none; }
}

/* ── Signature FX pills (POP-001) — gradient + glow + floating particles +
   electric arc + pulsing icon. REUSABLE across surfaces + "many places".
   Markup: <button class="gl-spark-pill"><span class="pill-glow"></span>
     <span class="pill-fx"><span class="sp sp1"></span>…</span>
     <span class="pill-ico">…svg…</span><span class="pill-lbl">Spark</span></button> ── */
.gl-spark-pill, .gl-enact-pill {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; border: none; border-radius: 999px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--gl-lift);
}
.gl-spark-pill { background: var(--gl-grad-spark); box-shadow: var(--gl-glow-spark); }
.gl-enact-pill { background: var(--gl-grad-brand); box-shadow: var(--gl-glow-brand); }
.gl-spark-pill:hover { transform: scale(1.05); box-shadow: var(--gl-glow-spark-hi); }
.gl-enact-pill:hover { transform: scale(1.05); box-shadow: var(--gl-glow-brand-hi); }
.gl-spark-pill .pill-glow, .gl-enact-pill .pill-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; z-index: 0; pointer-events: none; }
.gl-spark-pill:hover .pill-glow, .gl-enact-pill:hover .pill-glow { opacity: 1; }
.gl-spark-pill .pill-glow { background: radial-gradient(circle at 30% 30%, rgba(255,200,100,.4), transparent 55%); }
.gl-enact-pill .pill-glow { background: radial-gradient(circle at 30% 30%, rgba(120,220,255,.45), transparent 55%); }
.gl-spark-pill .pill-fx, .gl-enact-pill .pill-fx { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; z-index: 0; pointer-events: none; }
.gl-spark-pill .pill-fx .sp, .gl-enact-pill .pill-fx .sp { position: absolute; border-radius: 50%; }
.gl-spark-pill .sp1 { width:5px;height:5px; left:22%; top:30%; background:#FDE047; box-shadow:0 0 7px rgba(253,224,71,.85); animation: pop-float 3s ease-in-out infinite; }
.gl-spark-pill .sp2 { width:4px;height:4px; left:68%; top:44%; background:#FDBA74; box-shadow:0 0 6px rgba(253,152,25,.85); animation: pop-float 4s ease-in-out infinite .5s; }
.gl-spark-pill .sp3 { width:3px;height:3px; left:46%; top:22%; background:#FEF3C7; box-shadow:0 0 5px rgba(254,243,199,.85); animation: pop-float 3.5s ease-in-out infinite 1s; }
.gl-enact-pill .sp1 { width:5px;height:5px; left:16%; top:36%; background:#67E8F9; box-shadow:0 0 9px rgba(34,211,238,.9); animation: pop-floatb 2.5s ease-in-out infinite; }
.gl-enact-pill .sp2 { width:4px;height:4px; left:74%; top:46%; background:#93C5FD; box-shadow:0 0 7px rgba(59,130,246,.9); animation: pop-floatb 3s ease-in-out infinite .6s; }
.gl-enact-pill .pill-arc { position: absolute; inset: 0; width: 100%; height: 100%; animation: arc-pulse 2s ease-in-out infinite; }
.gl-spark-pill .pill-ico, .gl-enact-pill .pill-ico, .gl-spark-pill .pill-lbl, .gl-enact-pill .pill-lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; }
.gl-spark-pill .pill-ico { animation: ico-glow-p 2s ease-in-out infinite; }
.gl-enact-pill .pill-ico { animation: ico-glow-e 1.5s ease-in-out infinite; }
@keyframes pop-float  { 0%,100% { transform: translate(0,0); opacity: 1; } 50% { transform: translate(4px,-10px); opacity: .55; } }
@keyframes pop-floatb { 0%,100% { transform: translate(0,0); opacity: 1; } 50% { transform: translate(-6px,-9px); opacity: .55; } }
@keyframes arc-pulse  { 0%,100% { opacity: .3; } 50% { opacity: .7; } }
@keyframes ico-glow-p { 0%,100% { filter: drop-shadow(0 0 3px rgba(253,224,71,.5)); transform: scale(1); } 50% { filter: drop-shadow(0 0 9px rgba(253,224,71,.85)); transform: scale(1.12); } }
@keyframes ico-glow-e { 0%,100% { filter: drop-shadow(0 0 3px rgba(103,232,249,.5)); transform: scale(1); } 50% { filter: drop-shadow(0 0 9px rgba(103,232,249,.85)); transform: scale(1.12); } }
/* lighter spark pill (no particles) — secondary "drop a spark" / inline buttons */
.gl-spark-soft { display: inline-flex; align-items: center; gap: 7px; color: #fff; border: none; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; background: var(--gl-grad-spark); box-shadow: var(--gl-glow-spark); transition: var(--gl-lift); }
.gl-spark-soft:hover { transform: scale(1.04); box-shadow: var(--gl-glow-spark-hi); }
@media (prefers-reduced-motion: reduce) {
  .gl-spark-pill, .gl-enact-pill, .gl-spark-pill .sp, .gl-enact-pill .sp, .gl-enact-pill .pill-arc, .gl-spark-pill .pill-ico, .gl-enact-pill .pill-ico { animation: none; }
  .gl-spark-pill:hover, .gl-enact-pill:hover, .gl-spark-soft:hover { transform: none; }
}