/* Noe — color tokens
   ════════════════════════════════════════════════════════════════════
   The warm-beige palette (BH Nowi handoff, 2026-05-27) is the source of
   truth. Cream board surface, four-tier ink scale, terracotta accent that
   sits in the same warm family as the cards and columns so the eye never
   bounces. The older Linear-indigo iteration (design/v4) is deprecated.

   Two layers:
     1. Base values    — raw hues (--bg, --accent, --text-2)
     2. Semantic alias — role names that read from base (--surface-card,
                          --text-body, --tier-a). Build UIs against the
                          semantic layer where one exists.
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* ── Surfaces (warm neutral stack) ──────────────────────────────── */
  --bg:               #f6f5f3;  /* app background — warm cream */
  --bg-2:             #efefea;  /* recessed fills, rationale boxes */
  --panel:            #ffffff;  /* cards, sheets, modals, popovers */
  --surface-recessed: #efefea;  /* inset wells, chip base */
  --sidebar-bg:       #eeeeea;  /* left rail */
  --row-hover:        #f1efe9;  /* hovered list rows */

  /* ── Borders (hairline → strong) ────────────────────────────────── */
  --border:        #ebebe6;  /* default 1px hairline */
  --border-soft:   #f0f0eb;  /* barely-there divider */
  --border-strong: #d8d6cb;  /* hover edges, dividers, kbd chips */

  /* ── Ink (four-tier scale, warm-grey) ───────────────────────────── */
  --text:    #1f1e1b;  /* primary copy, headings */
  --text-2:  #6a665a;  /* secondary / body */
  --text-3:  #98937f;  /* meta, helper, captions */
  --text-4:  #b3ad97;  /* faintest — placeholders, disabled */
  --muted:   #6a665a;  /* alias of --text-2 (back-compat) */
  --muted-2: #98937f;  /* alias of --text-3 */

  /* ── Accent (terracotta) ────────────────────────────────────────── */
  --accent:       #c96342;  /* primary action ink, focus, urgent flag */
  --accent-hover: #b4512f;
  --accent-soft:  #f6e4dc;  /* selected nav, soft pills, hover wash */
  --accent-ink:   #1f1e1b;  /* ink to place ON an accent fill */

  /* ── Semantic status ────────────────────────────────────────────── */
  --prio-urgent: #c96342;  /* tier A flag — reads as the accent pin */
  --prio-high:   #c96342;  /* tier B */
  --done:        #6f9959;  /* completed / sent */
  --overdue:     #c96342;
  --ok:          #6f9959;  /* success */
  --warn:        #c9a14a;  /* caution */
  --note:        #5f7fb3;  /* informational blue */

  /* Status dots (channel-health table) */
  --dot-green:  #3aaa6a;
  --dot-yellow: #e0a022;
  --dot-red:    #d54339;

  /* ── Chips (neutral base) ───────────────────────────────────────── */
  --chip-bg:        #efefea;
  --chip-text:      #6a665a;
  --chip-bg-strong: #e3e2dc;

  /* Per-channel chip palette — soft tint + readable ink + 1px border.
     Each messaging surface Noe ingests gets its own colour so the inbox
     reads as colour-coded categories, not a wall of one hue. */
  --chip-whatsapp-bg: #e3f5ec; --chip-whatsapp-fg: #1f6f3e; --chip-whatsapp-bd: #b8dec8;
  --chip-email-bg:    #f0f3f7; --chip-email-fg:    #4a576b; --chip-email-bd:    #d4dbe6;
  --chip-telegram-bg: #e3eefa; --chip-telegram-fg: #1d6fb6; --chip-telegram-bd: #bcd6ee;
  --chip-meli-bg:     #fff8e3; --chip-meli-fg:     #8a6712; --chip-meli-bd:     #f5e2a8;
  --chip-facebook-bg: #e9eefb; --chip-facebook-fg: #2b5cd9; --chip-facebook-bd: #c2cef0;
  --chip-teams-bg:    #ecefff; --chip-teams-fg:    #3b46a8; --chip-teams-bd:    #d4daf6;
  --chip-hostex-bg:   #fef0e7; --chip-hostex-fg:   #b04e1f; --chip-hostex-bd:   #f5d0b8;

  /* Semantic chip roles */
  --chip-counterpart-bg: #eaf5ee; --chip-counterpart-fg: #2a6f3f;  /* who owns the ball */
  --chip-person-bg:      #e8e7f0; --chip-person-fg:      #444072;  /* @-mention */
  --chip-tag-bg:         #f4ecdc; --chip-tag-fg:         #6b5223;  /* tag */
  --chip-project-bg:     #efefea; --chip-project-fg:     #6a665a;  /* project (neutral base) */

  /* ── Per-state status colour (board / subtask badges) ───────────── */
  --state-todo-bg:    #f4f5f7; --state-todo-fg:    #6b7079; --state-todo-bd:    #e2e4e8;
  --state-await-bg:   #e8eef5; --state-await-fg:   #3a5580; --state-await-bd:   #c0cedf;
  --state-drafts-bg:  #fdeede; --state-drafts-fg:  #9a5a18; --state-drafts-bd:  #f5d9b3;
  --state-reply-bg:   #f0f1f3; --state-reply-fg:   #5b606a; --state-reply-bd:   #dfe1e5;
  --state-blocked-bg: #fde2e2; --state-blocked-fg: #c96342; --state-blocked-bd: #f5c4c4;
  --state-done-bg:    #e6f3e6; --state-done-fg:    #3f7a40; --state-done-bd:    #c8e3c9;

  /* Status-icon stroke hues (Linear-style circles in _status_icons.html) */
  --status-todo:    #8a8f97;
  --status-active:  #5e6ad2;
  --status-pending: #f2994a;
  --status-blocked: #eb5757;
  --status-done:    #5fa760;

  /* ── Semantic aliases (build against these) ─────────────────────── */
  --surface-app:      var(--bg);
  --surface-card:     var(--panel);
  --surface-sunken:   var(--bg-2);
  --text-heading:     var(--text);
  --text-body:        var(--text-2);
  --text-meta:        var(--text-3);
  --tier-a:           var(--prio-urgent);
  --tier-b:           var(--prio-high);
  --tier-c:           #d4d6da;
  --focus-ring:       color-mix(in oklch, var(--accent) 12%, transparent);
  --focus-border:     color-mix(in oklch, var(--accent) 35%, var(--border));
  --selection:        color-mix(in oklch, var(--accent) 28%, transparent);
}

/* ── Dark theme (auto-generated from handoff) ─────────────────────────
   Opt-in: <body data-theme="dark">. Inverts the warm stack to charcoal +
   a brighter terracotta. */
body[data-theme="dark"] {
  --bg:               #181512;
  --bg-2:             #282824;
  --panel:            #221f1b;
  --surface-recessed: #282824;
  --sidebar-bg:       #0f0e0c;
  --border:           #2d2d29;
  --border-soft:      #252522;
  --border-strong:    #45443d;
  --text:    #eae3dc;
  --text-2:  #aea8a1;
  --text-3:  #767369;
  --text-4:  #535045;
  --muted:   #aea8a1;
  --muted-2: #767369;
  --accent:       #df7755;
  --accent-soft:  #3a2a22;
  --ok:   #96bb84;
  --warn: #efcc85;
  --note: #89a6d4;
  --done: #96bb84;
}
