/* ========================================
   MERIQ BOT DESIGN SYSTEM
   Command-center tokens & primitives
   ======================================== */

/* --- Dark (default) --- */
:root,
html.dark {
  --background:   #0B0B0B;
  --card:         #121212;
  --popover:      #161616;
  --muted:        #141414;
  --accent-bg:    #161616;

  --foreground:   #F5F5F5;
  --ink-2:        #A0A0A0;
  --ink-3:        #6E6E6E;
  --ink-4:        #4A4A4A;

  --border:       rgba(255, 255, 255, 0.07);
  --line-1:       rgba(255, 255, 255, 0.04);
  --line-3:       rgba(255, 255, 255, 0.11);

  --primary:      #C6A86B;
  --gold-wash:    rgba(198, 168, 107, 0.10);
  --gold-line:    rgba(198, 168, 107, 0.22);

  /* Division accent (cyan) — coexists with gold */
  --division:       #06B6D4;
  --division-wash:  rgba(6, 182, 212, 0.10);
  --division-line:  rgba(6, 182, 212, 0.22);

  --destructive:  #B46A6A;
  --pos:          #7C9A7C;
  --pos-wash:     rgba(124, 154, 124, 0.10);

  --tile-shadow:  inset 0 1px 0 rgba(255, 255, 255, 0.025),
                  0 1px 0 rgba(0, 0, 0, 0.4);

  --page-wash:
    radial-gradient(900px 600px at 18% -10%, rgba(255, 255, 255, 0.018), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(198, 168, 107, 0.022), transparent 55%);

  --gold-gradient: linear-gradient(
    180deg,
    rgba(198, 168, 107, 0.18) 0%,
    rgba(198, 168, 107, 0.08) 100%
  );
  --gold-sheen: linear-gradient(180deg, #CEB27A 0%, #C6A86B 55%, #BE9F60 100%);

  --m-dur: 130ms;
  --m-ease: ease;

  --r-sm: 4px;
  --r-md: 6px;

  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* --- Light (warm off-white) --- */
html.light {
  --background:   #FAFAF7;
  --card:         #FFFFFF;
  --popover:      #FFFFFF;
  --muted:        #F3F2EE;
  --accent-bg:    #F3F2EE;

  --foreground:   #0B0B0B;
  --ink-2:        #5A5A5A;
  --ink-3:        #8A8680;
  --ink-4:        #B8B4AB;

  --border:       rgba(11, 11, 11, 0.08);
  --line-1:       rgba(11, 11, 11, 0.04);
  --line-3:       rgba(11, 11, 11, 0.14);

  --gold-wash:    rgba(198, 168, 107, 0.16);
  --gold-line:    rgba(198, 168, 107, 0.32);

  --division:       #0891B2;
  --division-wash:  rgba(6, 182, 212, 0.10);
  --division-line:  rgba(6, 182, 212, 0.22);

  --destructive:  #B46A6A;
  --pos:          #5E7D5E;
  --pos-wash:     rgba(94, 125, 94, 0.10);

  --tile-shadow:  inset 0 1px 0 rgba(255, 255, 255, 0.8),
                  0 1px 0 rgba(0, 0, 0, 0.04);

  --page-wash:
    radial-gradient(900px 600px at 18% -10%, rgba(198, 168, 107, 0.04), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(198, 168, 107, 0.025), transparent 55%);
}

/* --- Legacy aliases (map old --m-* tokens onto the new system) --- */
:root {
  --m-black: var(--background);
  --m-950: var(--background);
  --m-900: var(--card);
  --m-800: var(--accent-bg);
  --m-700: var(--border);
  --m-600: var(--ink-4);
  --m-500: var(--ink-3);
  --m-400: var(--ink-2);
  --m-300: var(--ink-2);
  --m-200: var(--foreground);
  --m-100: var(--foreground);
  --m-50:  var(--foreground);
  --m-white: var(--foreground);

  --m-accent:        var(--primary);
  --m-accent-hover:  var(--primary);
  --m-accent-muted:  var(--primary);
  --m-accent-subtle: var(--gold-wash);
  --m-accent-glow:   var(--gold-wash);

  --m-success: var(--pos);
  --m-error:   var(--destructive);
  --m-warning: var(--primary);

  --m-surface:          var(--card);
  --m-surface-elevated: var(--muted);
  --m-surface-hover:    var(--accent-bg);
  --m-glass-blur: 0px;

  --m-border:        var(--border);
  --m-border-hover:  var(--gold-line);

  --m-shadow-sm: var(--tile-shadow);
  --m-shadow-md: var(--tile-shadow);
  --m-shadow-lg: var(--tile-shadow);
  --m-shadow-accent: none;

  --m-radius-sm:  var(--r-sm);
  --m-radius-md:  var(--r-md);
  --m-radius-lg:  var(--r-md);
  --m-radius-xl:  var(--r-md);
  --m-radius-2xl: var(--r-md);

  --m-ease: ease;
  --m-duration: var(--m-dur);
  --m-duration-fast: 120ms;

  --m-font-heading: var(--font-sans);
  --m-font-body:    var(--font-sans);
  --m-font-mono:    var(--font-sans);

  --text-primary:   var(--foreground);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --error:          var(--destructive);
  --success:        var(--pos);
  --gold-500:       var(--primary);
  --gold:           var(--primary);
  --gold-hover:     var(--primary);
  --gold-subtle:    var(--gold-wash);
  --bg-primary:     var(--background);
  --bg-surface:     var(--card);
  --bg-surface-elevated: var(--muted);
  --border-hover:   var(--gold-line);
  --glass-blur:     0px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum';
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  background-image: var(--page-wash);
  background-attachment: fixed;
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.55;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--gold-wash); color: var(--primary); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

.hidden { display: none !important; }

/* --- Typography primitives --- */
.label-caps {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label-caps.gold { color: var(--primary); }
.label-caps.division { color: var(--division); }

/* Brand wordmark: always MERIQ BOT, never wordmark image */
.brand-caps {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foreground);
  line-height: 1;
}
.brand-caps .brand-sub {
  color: var(--ink-3);
  margin-left: 4px;
  font-weight: 500;
}

/* Instant page transitions — retain classes for compatibility, no movement. */
.fade-in,
.fade-in.visible { opacity: 1; transform: none; transition: none; }
.stagger > * { transition-delay: 0s !important; }

/* Silence the legacy noise overlay — surfaces stay calm. */
.noise-overlay::before { content: none !important; }

/* --- Tile primitive --- */
.m-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--tile-shadow);
}

/* --- Icon chip (division-themed by default — used on most section headers) --- */
.m-chip {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: linear-gradient(
    180deg,
    rgba(6, 182, 212, 0.18) 0%,
    rgba(6, 182, 212, 0.08) 100%
  );
  border: 1px solid var(--division-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--division);
  flex-shrink: 0;
}
.m-chip svg { width: 15px; height: 15px; stroke-width: 1.5; }
.m-chip-sm { width: 28px; height: 28px; border-radius: 4px; }
.m-chip-sm svg { width: 13px; height: 13px; }
.m-chip-lg { width: 40px; height: 40px; }
.m-chip-lg svg { width: 18px; height: 18px; }

/* Gold chip — reserved for anchor moments (max 2–3 visible per screen) */
.m-chip-gold {
  background: var(--gold-gradient);
  border: 1px solid var(--gold-line);
  color: var(--primary);
}

/* --- Live-status dot (gold, 2.4s pulse) --- */
.m-pulse-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  animation: m-pulse 2.4s ease-in-out infinite;
}
@keyframes m-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* --- Status pill --- */
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.m-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  display: inline-block;
}
.m-pill.active   { color: var(--division); }
.m-pill.active::before   { background: var(--division); }
.m-pill.waiting { color: var(--ink-3); }
.m-pill.waiting::before { background: var(--ink-3); }
.m-pill.attention { color: var(--destructive); }
.m-pill.attention::before { background: var(--destructive); }