/* ═══════════════════════════════════════════════════════════════════════
 * WAGGLE — Refreshed "Hive" Design System  (concept exploration)
 * A warmer, more crafted evolution of the original honey/dark theme.
 * Default = dark (warm graphite). [data-theme="light"] = warm paper.
 * ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Warm dark (the hive interior) ──────────────────────────── */
  --bg:          #14110b;
  --bg-2:        #1a160f;
  --surface:     #1f1a12;
  --surface-2:   #272117;
  --surface-3:   #322a1d;
  --line:        #38301f;
  --line-soft:   #2a2417;
  --line-strong: #4a4030;

  --text:        #f6f1e4;
  --text-2:      #c8bfa9;
  --text-muted:  #948a73;
  --text-dim:    #6b6250;

  /* ── Honey (the accent — used sparingly, with intent) ───────── */
  --honey:        #e9a52c;
  --honey-bright: #f6c45a;
  --honey-deep:   #c07e16;
  --honey-wash:   rgba(233,165,44,0.10);
  --honey-line:   rgba(233,165,44,0.28);
  --honey-glow:   0 0 0 1px rgba(233,165,44,0.25), 0 8px 30px -10px rgba(233,165,44,0.35);

  /* ── Refined, desaturated semantics ─────────────────────────── */
  --work:         #7aa6d6;   /* dusty blue   — tasks / workspaces */
  --intel:        #b196dd;   /* muted violet — intelligence / memory */
  --healthy:      #6cb78c;   /* sage         — complete / healthy */
  --attention:    #e9a52c;   /* honey        — attention / automation */
  --risk:         #db8068;   /* terracotta   — risk / failure */
  --work-wash:    rgba(122,166,214,0.12);
  --intel-wash:   rgba(177,150,221,0.12);
  --healthy-wash: rgba(108,183,140,0.12);
  --risk-wash:    rgba(219,128,104,0.12);

  /* ── Depth ──────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 4px 24px -8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-pop: 0 30px 80px -24px rgba(0,0,0,0.8);

  /* ── Type ───────────────────────────────────────────────────── */
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--sans);   /* softened: display now uses the clean grotesk, not a book serif */
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:          #f7f1e4;
  --bg-2:        #f1e9d8;
  --surface:     #fffdf8;
  --surface-2:   #f6efe0;
  --surface-3:   #efe6d2;
  --line:        #e4d8be;
  --line-soft:   #ede3cd;
  --line-strong: #d2c3a2;

  --text:        #211b11;
  --text-2:      #5a5140;
  --text-muted:  #847a64;
  --text-dim:    #a99e85;

  --honey:        #b57d12;
  --honey-bright: #cf932a;
  --honey-deep:   #92620a;
  --honey-wash:   rgba(181,125,18,0.10);
  --honey-line:   rgba(181,125,18,0.30);
  --honey-glow:   0 0 0 1px rgba(181,125,18,0.22), 0 8px 30px -12px rgba(181,125,18,0.30);

  --work:      #3f72b0;
  --intel:     #7d57b8;
  --healthy:   #3c8a5f;
  --attention: #b57d12;
  --risk:      #c0573c;
  --work-wash:    rgba(63,114,176,0.10);
  --intel-wash:   rgba(125,87,184,0.10);
  --healthy-wash: rgba(60,138,95,0.10);
  --risk-wash:    rgba(192,87,60,0.10);

  --shadow-sm: 0 1px 2px rgba(60,45,20,0.06);
  --shadow:    0 6px 24px -10px rgba(60,45,20,0.18), 0 1px 2px rgba(60,45,20,0.06);
  --shadow-lg: 0 24px 60px -22px rgba(60,45,20,0.22), 0 2px 8px rgba(60,45,20,0.08);
  --shadow-pop: 0 30px 80px -26px rgba(60,45,20,0.28);

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Hex utility ────────────────────────────────────────────────── */
.hex { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

/* ── Honeycomb texture (very subtle) ────────────────────────────── */
.comb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 18.5l26 15v30l-26 15-26-15v-30z M28 53.5l26 15v30l-26 15-26-15v-30z' fill='none' stroke='%23e9a52c' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
}

/* ── Focus ──────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }

::selection { background: rgba(233,165,44,0.28); color: var(--text); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; }

/* ── Shared atoms used across screens ───────────────────────────── */
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid var(--line); color: var(--text-2); background: var(--surface);
}

.kbd {
  font-family: var(--mono); font-size: 11px;
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2);
  box-shadow: 0 1px 0 var(--line);
}

.dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .55; transform: scale(.82);} }
.dot-live { animation: breathe 2.4s ease-in-out infinite; }