/* Label Hound — shared theme for the app surfaces (desk chat, portal gate, admin).
   Drop-in for the existing styles.css / admin/admin.css :root blocks. Variable
   names are the ones those sheets already use, so most rules re-theme in place.
   Source of truth: Label Hound Landing v2.dc.html (Sept 2026 refresh). */

/* Fonts: replace the Zilla Slab / Source Sans 3 / IBM Plex Mono link on all four
   surfaces with this ONE URL (keep them identical, per CLAUDE.md). */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* surfaces */
  --cream: #FFFFFF;           /* page ground (was cream) */
  --card: #F6F9F7;            /* tinted card / AI bubble */
  --paper: #FFFFFF;           /* panels, inputs */
  --card-warm: #FFFAF1;       /* manufacturer / gold-tinted panels */

  /* brand */
  --green: #0B5D3A;           /* primary action, headings accent */
  --green-deep: #094A2E;      /* hover */
  --green-ink: #083D28;       /* headings on white, nav text */
  --green-tint: #E6F2EC;      /* soft green fill (badges, avatar rings, active rail item) */
  --green-line: #C7DDD1;      /* border on green-tinted elements */
  --live: #1A9A62;            /* "on shift" dot */

  --gold: #F2B24F;            /* gold button fill */
  --gold-hover: #E9A43B;
  --gold-accent: #E0A24A;     /* dots, dividers, label art */
  --gold-ink: #8A5A14;        /* text on gold tint; eyebrow labels in admin */
  --gold-on: #3D2807;         /* text on a gold button */
  --gold-tint: #FDF0DA;       /* gold pill background */
  --gold-line: #F0E2C8;
  --gold-bright: #F2B24F;

  /* ink */
  --ink: #12201A;             /* headlines */
  --body: #1B2621;
  --body-soft: #4B5A53;
  --muted: #55645D;           /* secondary text; same value as the landing's */
  --nav: #44524B;
  --warn: #A3660F;
  --error: #A33A2A;

  /* hairlines (replace the rgba(6,75,46,…) ramps) */
  --line-30: #EEF2F0;
  --line-35: #EEF2F0;
  --line-45: #E6ECE9;
  --line-50: #E6ECE9;
  --line-60: #D5E0DA;         /* inputs, outlined pills */
  --line-input: #7A9085;      /* field outlines at rest (3:1 on white) */

  /* type: one family. --serif is kept as an alias so headline rules keep working. */
  --sans: 'Figtree', system-ui, -apple-system, sans-serif;
  --serif: 'Figtree', system-ui, -apple-system, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shape */
  --r-pill: 999px;            /* buttons, inputs, chips, status pills */
  --r-card: 24px;             /* chat panel, gate card (28px), admin table (18px) */
  --r-tile: 12px;             /* suggestion tiles, filters */
  --r-bubble: 20px;           /* message bubbles; 6px on the tail corner */
  /* the trailing arrow on a question row, as a mask (the landing's own arrow) */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");

  /* elevation */
  --shadow-card: 0 1px 2px rgba(16,40,28,.05), 0 24px 50px -32px rgba(16,40,28,.25);
  --shadow-float: 0 1px 2px rgba(16,40,28,.06), 0 30px 70px -28px rgba(16,40,28,.28);

  /* admin/admin.css aliases */
  --bg-alt: #F6F9F7;
  --surface: #FFFFFF;
  --border: #E6ECE9;
  --border-strong: #D5E0DA;
  --text: #12201A;
  --text-muted: #55645D;
  --c-cyan: #0B5D3A;          /* primary action */
  --c-magenta: #A33A2A;
  --c-yellow: #F2B24F;
  --radius: 18px;
  --radius-sm: 999px;
}

/* ---- Rule-level changes the variables can't carry ------------------------
   Heading weights: Zilla Slab 600 → Figtree 800 with tight tracking.       */
.wordmark, .welcome-headline, .drawer-title, .head h1, .stat .num, .bubble .md-h {
  font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em;
}
.wordmark .dot, .head .dot { display: none; }          /* the gold period is retired */

/* Square corners → rounded system */
.msg.ai .bubble { border-radius: var(--r-bubble) var(--r-bubble) var(--r-bubble) 6px; }
.msg.user .bubble { border-radius: var(--r-bubble) var(--r-bubble) 6px var(--r-bubble); }
.send-btn, .new-chat, .retry-btn, .drawer-go, .btn-primary, .btn-secondary,
.csat-btn, .tab, .export, .kb-action, td .pill, .admin-tag, .tab-badge { border-radius: var(--r-pill); }
.toolbar select, .cap-field input, .cap-field select { border-radius: var(--r-pill); }
.modal { border-radius: 28px; }
.stat, .table-scroll, .kb-form, .schedule-bar, .attach-preview { border-radius: 18px; }
.tool-btn { border-radius: 14px; }
body.desk .tool-btn.active { background: var(--green-tint); border-color: var(--green-line); color: var(--green); }

/* Gold corner brackets are retired (landing has none) */
.bracket::before, .bracket::after, .stat::before { display: none; }

/* Buttons: sentence case, no tracking, weight 600 */
.send-btn, .retry-btn, .drawer-go, .btn-primary, .btn-secondary, .new-chat, .csat-btn {
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.tab.active { background: var(--green); border-color: var(--green); }
.tab-badge { background: var(--gold); color: var(--gold-on); }

/* Mono labels stay uppercase but drop to .06em tracking */
.eyebrow, .persona-line, .msg .label, .starter-label, .drawer-sub, .stat .cap, th, .tab-group-label {
  letter-spacing: 0.06em; color: var(--muted);
}
.tab-group-label, .admin-tag { color: var(--gold-ink); }
.admin-tag { background: var(--gold-tint); border: 0; padding: 4px 10px; }

/* Focus ring follows the primary, not gold */
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}

/* Avatar: the sitting hound in a green-tint circle (assets/hound-sitting-small.png, set in app.js) */
.msg .label .label-logo { width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint); object-fit: contain; object-position: 50% 100%; }

/* Thinking indicator: the running hound artwork, larger, no bob (the art carries the motion) */
.think-hound { width: 38px; height: 26px; animation: none; }
.think-dot { background: var(--gold-accent); }