/*
 * dropout.css — DropOut Design System v1
 * Canonical tokens + utility classes for all templates.
 * Import with: <link rel="stylesheet" href="/static/dropout.css">
 *
 * Organized as:
 *  1.  Color tokens
 *  2.  Typography tokens
 *  3.  Spacing tokens
 *  4.  Surface & glass tokens
 *  5.  Border tokens
 *  6.  Shadow tokens
 *  7.  Animation tokens
 *  8.  Reset baseline
 *  9.  Glass card component
 * 10.  Badge component
 * 11.  Regime chip component
 * 12.  Signal bar component
 * 13.  Typography utility classes
 * 14.  Animated glass blob backdrop
 * 15.  Scrollbar style
 * 16.  Selection + focus
 */

/* ── 1. COLOR TOKENS ─────────────────────────────────────────────────────────
 *
 * Palette origin:
 *   --do-bg, --do-s1..3   : dark surface ramp (franky.html, the_vibe.html)
 *   --do-copper           : primary accent — ticker labels, Franky borders
 *   --do-green            : UP / positive / CONFIRMED outcomes
 *   --do-amber            : SIDEWAYS / caution / ACTIVE status
 *   --do-red              : DOWN / negative / FAILED outcomes
 *   --do-cyan             : signal/data viz accent (The Vibe canvas)
 *   --do-violet           : secondary data viz
 *   --do-teal             : MOMENTUM regime
 *   --do-grey             : neutral / EXPIRED / muted data
 */
:root {
  /* Backgrounds */
  --do-bg:    #06070B;
  --do-s1:    #0D0F18;
  --do-s2:    #161822;
  --do-s3:    #1E202C;
  --do-s4:    #252836;

  /* Core palette */
  --do-copper:  #C2613C;
  --do-green:   #3DD68C;
  --do-amber:   #FFB932;
  --do-red:     #FF5C5C;
  --do-cyan:    #00D4FF;
  --do-violet:  #8B5CF6;
  --do-teal:    #2DD4BF;
  --do-orange:  #F97316;
  --do-grey:    #6B7280;
  --do-gold:    #E0A45E;

  /* Text ramp */
  --do-text:   #E8E8F0;
  --do-muted:  #8A8A9A;
  --do-dim:    rgba(255,255,255,0.28);
  --do-faint:  rgba(255,255,255,0.10);

  /* Status colors (semantic aliases) */
  --do-status-active:    var(--do-amber);
  --do-status-confirmed: var(--do-green);
  --do-status-failed:    var(--do-red);
  --do-status-expired:   var(--do-grey);

  /* Regime colors */
  --do-regime-momentum:      var(--do-teal);
  --do-regime-mean-reversion: var(--do-amber);
  --do-regime-transitional:  var(--do-grey);
  --do-regime-mixed:         var(--do-grey);
}

/* ── 2. TYPOGRAPHY TOKENS ────────────────────────────────────────────────────
 *
 * Font roles:
 *   --do-font-body    : Hanken Grotesk — prose, labels, UI copy
 *   --do-font-mono    : JetBrains Mono — data, tickers, numbers, code
 *   --do-font-display : Space Grotesk  — direction arrows, large labels
 *
 * Type scale (px): 9 / 10 / 11 / 12 / 13 / 14 / 16 / 18 / 24 / 28 / 32
 */
:root {
  --do-font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --do-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --do-font-display: 'Space Grotesk', system-ui, sans-serif;

  --do-text-xs:   9px;
  --do-text-sm:   11px;
  --do-text-base: 13px;
  --do-text-md:   14px;
  --do-text-lg:   16px;
  --do-text-xl:   18px;
  --do-text-2xl:  24px;
  --do-text-3xl:  28px;
  --do-text-4xl:  32px;

  --do-lh-tight:  1.25;
  --do-lh-base:   1.5;
  --do-lh-loose:  1.7;

  --do-ls-tight:  -0.02em;
  --do-ls-normal: 0;
  --do-ls-wide:   0.05em;
  --do-ls-wider:  0.08em;
  --do-ls-widest: 0.12em;
}

/* ── 3. SPACING TOKENS ───────────────────────────────────────────────────────
 * 4px base unit
 */
:root {
  --do-sp-1:  4px;
  --do-sp-2:  8px;
  --do-sp-3:  12px;
  --do-sp-4:  16px;
  --do-sp-5:  20px;
  --do-sp-6:  24px;
  --do-sp-8:  32px;
  --do-sp-10: 40px;
  --do-sp-12: 48px;

  --do-radius-sm:   4px;
  --do-radius-md:   8px;
  --do-radius-lg:   12px;
  --do-radius-xl:   18px;
  --do-radius-pill: 999px;
}

/* ── 4. SURFACE & GLASS TOKENS ───────────────────────────────────────────────
 * Glass cards use backdrop-filter over the animated blob backdrop
 * (see section 14). Without the blobs the glass looks flat.
 */
:root {
  --do-glass-blur:     24px;
  --do-glass-blur-sm:  14px;
  --do-glass-blur-lg:  36px;

  --do-glass-bg:       rgba(255,255,255,0.03);
  --do-glass-bg-2:     rgba(255,255,255,0.055);
  --do-glass-border:   rgba(255,255,255,0.09);
  --do-glass-border-2: rgba(255,255,255,0.14);
  --do-glass-shine:    rgba(255,255,255,0.14);

  /* Solid fallback surfaces (no backdrop-filter) */
  --do-surface:       rgba(13,15,24,0.72);
  --do-surface-2:     rgba(22,24,34,0.82);
  --do-surface-solid: #0D0F18;
}

/* ── 5. BORDER TOKENS ────────────────────────────────────────────────────────*/
:root {
  --do-border:         rgba(255,255,255,0.07);
  --do-border-subtle:  rgba(255,255,255,0.04);
  --do-border-strong:  rgba(255,255,255,0.14);
  --do-border-copper:  rgba(194,97,60,0.35);
}

/* ── 6. SHADOW TOKENS ────────────────────────────────────────────────────────*/
:root {
  --do-shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --do-shadow-md: 0 8px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.07) inset;
  --do-shadow-lg: 0 20px 60px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.10) inset;
  --do-glow-copper: 0 0 16px -2px rgba(194,97,60,0.5);
  --do-glow-green:  0 0 12px -2px rgba(61,214,140,0.4);
}

/* ── 7. ANIMATION TOKENS ─────────────────────────────────────────────────────*/
:root {
  --do-ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --do-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --do-dur-fast:    120ms;
  --do-dur-base:    200ms;
  --do-dur-slow:    350ms;
}

@keyframes do-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@keyframes do-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
  30%           { transform: translateY(-6px); opacity: 1;   }
}
@keyframes do-spin {
  to { transform: rotate(360deg); }
}

/* ── 8. RESET BASELINE ───────────────────────────────────────────────────────*/
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── 9. GLASS CARD COMPONENT ─────────────────────────────────────────────────
 *
 * Usage:
 *   <div class="do-card">…</div>            — solid dark card
 *   <div class="do-card do-card--glass">…</div>  — glass card (needs blob backdrop)
 *   <div class="do-card do-card--copper">…</div> — card with copper left accent
 *
 * Modifier classes:
 *   do-card--sm    : tighter padding (8px 10px)
 *   do-card--lg    : looser padding (16px 20px)
 *   do-card--glass : add glass backdrop-filter
 *   do-card--copper: copper left border accent
 *   do-card--shine : add top-edge shine line (requires position:relative)
 */
.do-card {
  background: var(--do-surface);
  border: 1px solid var(--do-border);
  border-radius: var(--do-radius-lg);
  padding: var(--do-sp-3) var(--do-sp-3);
  position: relative;
}
.do-card--sm  { padding: var(--do-sp-2) var(--do-sp-3); }
.do-card--lg  { padding: var(--do-sp-4) var(--do-sp-5); }

.do-card--glass {
  background: var(--do-glass-bg);
  backdrop-filter: blur(var(--do-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--do-glass-blur)) saturate(160%);
  border-color: var(--do-glass-border);
  box-shadow: var(--do-shadow-md);
}

.do-card--copper {
  border-left: 2px solid var(--do-copper);
  border-top-color: var(--do-border);
  border-right-color: var(--do-border);
  border-bottom-color: var(--do-border);
}

.do-card--shine::after {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--do-glass-shine) 30%, var(--do-glass-shine) 70%, transparent);
  border-radius: 999px;
  pointer-events: none;
}

/* ── 10. BADGE COMPONENT ─────────────────────────────────────────────────────
 *
 * Usage:
 *   <span class="do-badge do-badge--active">ACTIVE</span>
 *   <span class="do-badge do-badge--confirmed">CONFIRMED</span>
 *   <span class="do-badge do-badge--regime-mom">MOMENTUM</span>
 */
.do-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--do-font-mono);
  font-size: var(--do-text-xs);
  font-weight: 500;
  letter-spacing: var(--do-ls-widest);
  padding: 2px 7px;
  border-radius: var(--do-radius-pill);
  border: 1px solid currentColor;
  line-height: 1.4;
  white-space: nowrap;
}
.do-badge--active    { color: var(--do-amber);  background: rgba(255,185,50,0.10);  border-color: rgba(255,185,50,0.35);  }
.do-badge--confirmed { color: var(--do-green);  background: rgba(61,214,140,0.10);  border-color: rgba(61,214,140,0.35); }
.do-badge--failed    { color: var(--do-red);    background: rgba(255,92,92,0.10);   border-color: rgba(255,92,92,0.35);  }
.do-badge--expired   { color: var(--do-grey);   background: rgba(107,114,128,0.10); border-color: rgba(107,114,128,0.35);}
.do-badge--copper    { color: var(--do-copper); background: rgba(194,97,60,0.10);   border-color: rgba(194,97,60,0.35);  }

/* ── 11. REGIME CHIP COMPONENT ───────────────────────────────────────────────
 *
 * Usage:
 *   <span class="do-regime do-regime--momentum">MOMENTUM</span>
 */
.do-regime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--do-font-mono);
  font-size: var(--do-text-xs);
  font-weight: 700;
  letter-spacing: var(--do-ls-widest);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--do-radius-pill);
}
.do-regime::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.do-regime--momentum      { color: var(--do-teal);  background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.25); }
.do-regime--mean-reversion{ color: var(--do-amber); background: rgba(255,185,50,0.12); border: 1px solid rgba(255,185,50,0.25); }
.do-regime--transitional  { color: var(--do-grey);  background: rgba(107,114,128,0.12);border: 1px solid rgba(107,114,128,0.25);}
.do-regime--mixed         { color: var(--do-grey);  background: rgba(107,114,128,0.12);border: 1px solid rgba(107,114,128,0.25);}

/* ── 12. SIGNAL BAR COMPONENT ────────────────────────────────────────────────
 * Five-band RSSI bar strip for B1-B5
 *
 * Usage:
 *   <div class="do-signal-bars">
 *     <div class="do-signal-bar do-signal-bar--pos" style="height:65%"></div>
 *     …
 *   </div>
 */
.do-signal-bars {
  display: flex;
  gap: 3px;
  height: 28px;
  align-items: flex-end;
}
.do-signal-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  background: var(--do-s4);
}
.do-signal-bar--pos  { background: var(--do-green); }
.do-signal-bar--neg  { background: var(--do-red); }
.do-signal-bar--flat { background: var(--do-s4); }

/* ── 13. TYPOGRAPHY UTILITY CLASSES ──────────────────────────────────────────*/
.do-text-ticker {
  font-family: var(--do-font-mono);
  font-size: var(--do-text-md);
  font-weight: 500;
  color: var(--do-copper);
  letter-spacing: var(--do-ls-wide);
}
.do-text-data {
  font-family: var(--do-font-mono);
  font-size: var(--do-text-sm);
  color: var(--do-text);
  font-variant-numeric: tabular-nums;
}
.do-text-label {
  font-family: var(--do-font-mono);
  font-size: var(--do-text-xs);
  color: var(--do-muted);
  letter-spacing: var(--do-ls-widest);
  text-transform: uppercase;
}
.do-text-muted   { color: var(--do-muted); }
.do-text-dim     { color: var(--do-dim); }
.do-text-copper  { color: var(--do-copper); }
.do-text-green   { color: var(--do-green); }
.do-text-amber   { color: var(--do-amber); }
.do-text-red     { color: var(--do-red); }
.do-text-grey    { color: var(--do-grey); }

.do-mono { font-family: var(--do-font-mono); }
.do-display { font-family: var(--do-font-display); font-weight: 700; }

/* Confidence bar */
.do-conf-bar {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.do-conf-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--do-dur-slow) var(--do-ease-out);
}

/* Thin horizontal rule */
.do-rule {
  height: 1px;
  background: var(--do-border);
  border: none;
  margin: var(--do-sp-3) 0;
}

/* Status dot (pulsing) */
.do-status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--do-green);
  box-shadow: 0 0 6px rgba(61,214,140,0.6);
  animation: do-pulse 3s ease-in-out infinite;
}
.do-status-dot--amber { background: var(--do-amber); box-shadow: 0 0 6px rgba(255,185,50,0.6); }
.do-status-dot--red   { background: var(--do-red);   box-shadow: 0 0 6px rgba(255,92,92,0.6); }

/* ── 14. ANIMATED GLASS BLOB BACKDROP ────────────────────────────────────────
 *
 * Drop-in hero backdrop for pages that use glass cards.
 * Place as first child of <body>:
 *
 *   <div class="do-blobs" aria-hidden="true">
 *     <div class="do-blob do-blob-1"></div>
 *     <div class="do-blob do-blob-2"></div>
 *     <div class="do-blob do-blob-3"></div>
 *   </div>
 *
 * Three color modes via modifier on the wrapper:
 *   (none)          : copper/orange dominant — dashboard, Franky Chat
 *   do-blobs--cool  : cyan/violet  — The Vibe, Signal Receiver
 *   do-blobs--warm  : copper/gold  — Order Desk, portfolio views
 */
.do-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.do-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
}

/* Default palette: copper accent */
.do-blob-1 {
  width: 75vw; height: 70vw;
  background: radial-gradient(circle, rgba(194,97,60,0.45) 0%, rgba(194,70,30,0.15) 45%, transparent 70%);
  top: -15%; left: -10%;
  animation: do-blob-1 22s ease-in-out infinite alternate;
}
.do-blob-2 {
  width: 60vw; height: 55vw;
  background: radial-gradient(circle, rgba(61,214,140,0.18) 0%, transparent 65%);
  bottom: -8%; right: -8%;
  animation: do-blob-2 28s ease-in-out infinite alternate;
}
.do-blob-3 {
  width: 45vw; height: 40vw;
  background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 65%);
  top: 15%; right: 10%;
  animation: do-blob-3 19s ease-in-out infinite alternate;
}

@keyframes do-blob-1 {
  0%   { transform: translate(0, 0)      scale(1.0); }
  33%  { transform: translate(5vw, 4vw)  scale(1.08); }
  66%  { transform: translate(-3vw, 7vw) scale(0.95); }
  100% { transform: translate(9vw, 2vw)  scale(1.05); }
}
@keyframes do-blob-2 {
  0%   { transform: translate(0, 0)        scale(1.0); }
  33%  { transform: translate(-7vw, -4vw)  scale(1.10); }
  66%  { transform: translate(4vw, -8vw)   scale(0.92); }
  100% { transform: translate(-10vw, -3vw) scale(1.06); }
}
@keyframes do-blob-3 {
  0%   { transform: translate(0, 0)     scale(1.0); }
  50%  { transform: translate(-5vw, 6vw) scale(1.12); }
  100% { transform: translate(4vw, -4vw) scale(0.94); }
}

/* Cool variant: cyan/violet (The Vibe, Signal Receiver) */
.do-blobs--cool .do-blob-1 {
  background: radial-gradient(circle, rgba(0,212,255,0.30) 0%, rgba(0,150,220,0.10) 45%, transparent 70%);
}
.do-blobs--cool .do-blob-2 {
  background: radial-gradient(circle, rgba(139,92,246,0.22) 0%, transparent 65%);
}
.do-blobs--cool .do-blob-3 {
  background: radial-gradient(circle, rgba(45,212,191,0.18) 0%, transparent 65%);
}

/* Warm variant: copper/gold (Order Desk, portfolio) */
.do-blobs--warm .do-blob-1 {
  background: radial-gradient(circle, rgba(224,164,94,0.38) 0%, rgba(194,97,60,0.18) 45%, transparent 70%);
}
.do-blobs--warm .do-blob-2 {
  background: radial-gradient(circle, rgba(194,97,60,0.25) 0%, transparent 65%);
}
.do-blobs--warm .do-blob-3 {
  background: radial-gradient(circle, rgba(255,185,50,0.15) 0%, transparent 65%);
}

/* Ensure page content stacks above blobs */
body > :not(.do-blobs) { position: relative; z-index: 1; }

/* ── 15. SCROLLBAR ───────────────────────────────────────────────────────────*/
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── 16. SELECTION + FOCUS ───────────────────────────────────────────────────*/
::selection { background: rgba(194,97,60,0.30); color: #fff; }
:focus-visible { outline: 2px solid rgba(194,97,60,0.6); outline-offset: 2px; border-radius: var(--do-radius-sm); }

/* ── FALLBACK: no backdrop-filter ────────────────────────────────────────────*/
@supports not (backdrop-filter: blur(1px)) {
  .do-card--glass { background: var(--do-surface-solid); }
}