/* BLACK TIDE POCKET — design tokens.
   Transcribed directly from BLACK_TIDE_PLATFORM/src/intelligence_harbor/ui/app.py
   (palette app.py:107-114, glow app.py:860-868, turn colors app.py:990-995,
   badge tones app.py:610-629, type roles app.py:379-609). Not approximated —
   these are the same values the desktop app uses. */

:root {
  /* semantic colors */
  --bt-success: #39d579;
  --bt-warning: #ffd15c;
  --bt-danger:  #ff5d67;
  --bt-primary: #18b9ff;

  --bt-panel-bg:  rgba(5, 16, 28, 0.86);
  --bt-panel-alt: rgba(7, 20, 34, 0.92);
  --bt-soft-text:   #a7bfd9;
  --bt-bright-text: #edf6ff;
  --bt-window-bg: #020913;

  /* turn-phase colors (Ocean/Tide tape + phase badge) */
  --bt-turn-rolling-short: #ff8a8a;
  --bt-turn-rolled-short:  #ff5d67;
  --bt-turn-curling-long:  #7ee2a8;
  --bt-turn-curled-long:   #4bd48a;
  --bt-turn-fading:        #ffd27a;
  --bt-turn-drifting:      #9fb4c8;
  --bt-tape-bull: #4bd48a;
  --bt-tape-bear: #ff5d67;
  --bt-tape-neutral: #5c7288;

  /* card / panel chrome */
  --bt-card-bg: rgba(4, 15, 26, 0.62);
  --bt-card-border: rgba(35, 147, 212, 0.20);
  --bt-panel-bg-alt: rgba(4, 15, 26, 0.54);
  --bt-panel-border: rgba(31, 132, 191, 0.14);
  --bt-focus-panel-bg: rgba(3, 13, 24, 0.68);
  --bt-focus-panel-border: rgba(49, 198, 255, 0.28);
  --bt-radius-card: 18px;
  --bt-radius-panel: 22px;
  --bt-radius-focus-panel: 26px;
  --bt-radius-pill: 11px;

  /* typography roles */
  --bt-font-base: 'Segoe UI', -apple-system, system-ui, sans-serif;
  --bt-font-hero: Georgia, 'Times New Roman', serif;
  --bt-size-hero: 28px;
  --bt-size-page-title: 11px; --bt-tracking-page-title: 0.28em;
  --bt-size-panel-title: 16px; --bt-color-panel-title: #2cc7ff;
  --bt-size-stat-value: 20px;
  --bt-size-stat-label: 10px; --bt-tracking-stat-label: 0.12em;
  --bt-size-badge: 11px;

  /* badge tones */
  --bt-badge-primary-bg: rgba(11, 69, 105, 0.44); --bt-badge-primary-border: rgba(39, 197, 255, 0.32); --bt-badge-primary-fg: #cff2ff;
  --bt-badge-healthy-bg: rgba(18, 66, 39, 0.52);  --bt-badge-healthy-border: rgba(78, 224, 124, 0.34); --bt-badge-healthy-fg: #e8fff0;
  --bt-badge-warning-bg: rgba(80, 62, 16, 0.54);  --bt-badge-warning-border: rgba(255, 209, 92, 0.36); --bt-badge-warning-fg: #fff8dd;
  --bt-badge-danger-bg:  rgba(83, 22, 28, 0.56);  --bt-badge-danger-border:  rgba(255, 93, 103, 0.38); --bt-badge-danger-fg: #fff0f0;

  /* the signature glow — every card/badge gets one matching its semantic color */
  --bt-glow-primary: 0 0 20px rgba(24, 185, 255, 0.30);
  --bt-glow-healthy: 0 0 16px rgba(57, 213, 121, 0.28);
  --bt-glow-warning: 0 0 16px rgba(255, 209, 92, 0.26);
  --bt-glow-danger:  0 0 16px rgba(255, 93, 103, 0.28);
  --bt-glow-focus:   0 0 32px rgba(24, 185, 255, 0.38);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bt-window-bg);
  color: var(--bt-bright-text);
  font-family: var(--bt-font-base);
  font-size: 12px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

body {
  background:
    radial-gradient(circle at 82% 8%, rgba(24, 185, 255, 0.10), transparent 42%),
    radial-gradient(circle at 6% 92%, rgba(44, 199, 255, 0.08), transparent 46%),
    linear-gradient(135deg, #030914 0%, #04111f 40%, #020913 72%, #02060d 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(24, 185, 255, 0.28);
  border-radius: 6px;
}