/* DeskMux product UI tokens — v0.1
   Scope: the installed app shell (Electron renderer, Hermes Desktop plugin panel).
   Extends the website tokens; does not replace them.

   Namespaces
     --dm-*   brand primitives (Ink, Paper, Graphite, Berry, agent accents, Plex)
     --dmp-*  product roles (surfaces, lines, status, density, focus, agent slots)

   Themes
     :root                          Ink (dark) — the default installed app theme
     [data-product-theme="paper"]   Paper (light)

   Accents
     [data-accent="berry|teal|cobalt|sage|amber"]  workspace accent (Berry default)
     [data-agent="berry|teal|cobalt|sage|amber"]   per-bot identity, set on any subtree
*/

@import url("./tokens.css");

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------- surfaces
     Greys are Ink mixed with Graphite dark, so app chrome stays in the
     brand's cool neutral family instead of drifting blue or warm.
       frame   #0F1112  window field, gutters between panes
       pane    #08090A  = Ink, the column surface
       raised  #151718  bubbles, selected rows, inputs
       lifted  #1C1E20  hover, menus, popovers
  */
  --dmp-frame: #0f1112;
  --dmp-pane: var(--dm-ink);
  --dmp-raised: #151718;
  --dmp-lifted: #1c1e20;
  --dmp-sunken: #060708;
  --dmp-overlay: #1a1c1e;
  --dmp-scrim: rgba(6, 7, 8, 0.72);

  /* ------------------------------------------------------------------ lines */
  --dmp-line: #242627;
  --dmp-line-strong: #2f3233;
  --dmp-line-faint: #1a1c1d;

  /* ------------------------------------------------------------------- text */
  --dmp-fg-strong: var(--dm-paper);
  --dmp-fg: #e2e4e3;
  --dmp-muted: var(--dm-muted-on-ink);
  --dmp-faint: #6e7576;

  /* ----------------------------------------------------------------- accent
     accent      fills (primary button, active indicator)
     accent-text accessible accent-colored text on dark panes
     accent-wash quiet tinted field behind selection or a badge
     accent-line hairline that reads as accent without shouting
  */
  --dmp-accent: var(--dm-accent);
  --dmp-accent-text: var(--dm-accent-soft);
  --dmp-accent-hover: color-mix(in srgb, var(--dm-accent) 84%, var(--dm-paper));
  --dmp-accent-wash: color-mix(in srgb, var(--dm-accent) 14%, transparent);
  --dmp-accent-line: color-mix(in srgb, var(--dm-accent) 45%, transparent);
  --dmp-on-accent: var(--dm-paper);

  /* ------------------------------------------------------- agent identity
     Default agent slot = workspace accent. Any element may override with
     data-agent to give one bot its own color.
  */
  --dmp-agent: var(--dmp-accent);
  --dmp-agent-text: var(--dmp-accent-text);
  --dmp-agent-wash: var(--dmp-accent-wash);
  --dmp-agent-line: var(--dmp-accent-line);
  --dmp-on-agent: var(--dmp-on-accent);

  /* ------------------------------------------------------------------ status
     Status never depends on hue alone: each role pairs with a glyph shape
     and a mono label in the components that use it.
  */
  --dmp-live: #3f8f86;
  --dmp-live-text: #7db8b0;
  --dmp-attention: #c4843a;
  --dmp-attention-text: #e0b57a;
  --dmp-done: #6f8a5e;
  --dmp-done-text: #a7b89a;
  --dmp-danger: #b8453b;
  --dmp-danger-text: #de8c82;
  --dmp-idle: var(--dm-graphite-dark);
  --dmp-idle-text: var(--dm-graphite-mid);

  /* ------------------------------------------------------------------- focus
     Two-part ring: 2px accent-light halo plus a 1px pane-colored offset so it
     stays visible on raised rows, inside inputs, and over the screen bezel.
  */
  --dmp-focus: var(--dm-accent-soft);
  --dmp-focus-ring: 0 0 0 1px var(--dmp-pane), 0 0 0 3px var(--dmp-focus);
  --dmp-focus-ring-inset: inset 0 0 0 1px var(--dmp-focus);

  /* --------------------------------------------------------------- elevation */
  --dmp-shadow-menu: 0 1px 2px rgba(6, 7, 8, 0.6), 0 12px 28px -8px rgba(6, 7, 8, 0.7);
  --dmp-shadow-modal: 0 2px 4px rgba(6, 7, 8, 0.5), 0 32px 64px -16px rgba(6, 7, 8, 0.75);
  --dmp-shadow-screen: 0 1px 0 color-mix(in srgb, var(--dm-paper) 6%, transparent);

  /* -------------------------------------------------------------------- type
     Sans carries human content (names, messages, prose).
     Mono carries system fact (harness, display id, capacity, timestamps).
  */
  --dmp-font-ui: var(--dm-font-body);
  --dmp-font-mono: var(--dm-font-mono);

  --dmp-text-micro: 0.6875rem; /* 11px — mono ids, uppercase meta */
  --dmp-text-meta: 0.75rem; /* 12px — mono labels, timestamps */
  --dmp-text-ui: 0.8125rem; /* 13px — chrome, rows, buttons */
  --dmp-text-body: 0.875rem; /* 14px — chat and prose */
  --dmp-text-title: 0.9375rem; /* 15px — pane titles */
  --dmp-text-section: 1.0625rem; /* 17px — settings section heads */
  --dmp-text-lead: 1.25rem; /* 20px — empty states, onboarding */

  --dmp-line-tight: 1.25;
  --dmp-line-ui: 1.4;
  --dmp-line-body: 1.55;

  --dmp-weight-regular: 400;
  --dmp-weight-medium: 500;
  --dmp-weight-semibold: 600;

  --dmp-tracking-micro: 0.08em;
  --dmp-tracking-mono: 0.01em;
  --dmp-tracking-title: -0.01em;

  /* ------------------------------------------------------------------- space
     4px base with 2px and 6px available for dense chrome.
  */
  --dmp-space-0: 2px;
  --dmp-space-1: 4px;
  --dmp-space-2: 6px;
  --dmp-space-3: 8px;
  --dmp-space-4: 12px;
  --dmp-space-5: 16px;
  --dmp-space-6: 20px;
  --dmp-space-7: 24px;
  --dmp-space-8: 32px;
  --dmp-space-9: 40px;

  /* ------------------------------------------------------------------ shape
     Radii quote the open symbol: roster panes 6, active pane 10.
  */
  --dmp-radius-row: var(--dm-radius-roster);
  --dmp-radius-control: 6px;
  --dmp-radius-tile: 8px;
  --dmp-radius-pane: var(--dm-radius-pane);
  --dmp-radius-bubble: 10px;
  --dmp-radius-pill: var(--dm-radius-pill);

  /* ------------------------------------------------------------------ layout */
  --dmp-roster-w: 264px;
  --dmp-roster-min: 232px;
  --dmp-screen-w: 320px;
  --dmp-screen-min: 288px;
  --dmp-header-h: 44px;
  --dmp-row-h: 52px;
  --dmp-row-h-compact: 36px;
  --dmp-gutter: 1px;
  --dmp-measure: 68ch;
  --dmp-hit: 28px; /* pointer target for dense icon buttons */
  --dmp-hit-touch: 44px;

  /* ------------------------------------------------------------------ motion */
  --dmp-ease: var(--dm-ease);
  --dmp-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dmp-fast: var(--dm-fast);
  --dmp-base: var(--dm-base);
  --dmp-slow: var(--dm-slow);
  --dmp-pulse: 2400ms;
}

/* =========================================================== Paper (light) */

[data-product-theme="paper"] {
  color-scheme: light;

  --dmp-frame: #dadcda;
  --dmp-pane: var(--dm-paper);
  --dmp-raised: var(--dm-active-paper);
  --dmp-lifted: #dfe1df;
  --dmp-sunken: #e2e4e2;
  --dmp-overlay: #fbfcfb;
  --dmp-scrim: rgba(8, 9, 10, 0.32);

  --dmp-line: #d4d5d5;
  --dmp-line-strong: #bcbebd;
  --dmp-line-faint: #e2e4e2;

  --dmp-fg-strong: var(--dm-ink);
  --dmp-fg: #1b1f20;
  --dmp-muted: var(--dm-muted-on-paper);
  --dmp-faint: #7d8486;

  --dmp-accent-text: var(--dm-accent-deep);
  --dmp-accent-hover: color-mix(in srgb, var(--dm-accent) 88%, var(--dm-ink));
  --dmp-accent-wash: color-mix(in srgb, var(--dm-accent) 12%, transparent);
  --dmp-accent-line: color-mix(in srgb, var(--dm-accent) 55%, transparent);

  --dmp-live-text: #2b6560;
  --dmp-attention-text: #8c5c24;
  --dmp-done-text: #4d6343;
  --dmp-danger-text: #8e2f27;
  --dmp-idle-text: var(--dm-graphite-dark);

  --dmp-focus: var(--dm-accent-deep);

  --dmp-shadow-menu: 0 1px 2px rgba(8, 9, 10, 0.1), 0 12px 28px -10px rgba(8, 9, 10, 0.22);
  --dmp-shadow-modal: 0 2px 4px rgba(8, 9, 10, 0.12), 0 32px 64px -20px rgba(8, 9, 10, 0.28);
  --dmp-shadow-screen: 0 1px 0 rgba(8, 9, 10, 0.06);
}

/* ================================================= accent label contrast
   Which label color clears 4.5:1 on a solid accent fill differs per family.
   Berry and Cobalt take a Paper label; Teal, Sage, and Amber take Ink.
*/

[data-accent="berry"],
[data-accent="cobalt"] {
  --dmp-on-accent: var(--dm-paper);
}

[data-accent="teal"],
[data-accent="sage"],
[data-accent="amber"] {
  --dmp-on-accent: var(--dm-ink);
}

/* ======================================================== agent identity
   Set data-agent on a roster row, a chat thread, a screen tile, or any pane
   that belongs to one bot. Structure never changes; only the accent slot does.
*/

[data-agent] {
  --dmp-agent: var(--dmp-agent-base);
  --dmp-agent-text: var(--dmp-agent-on-dark);
  --dmp-agent-wash: color-mix(in srgb, var(--dmp-agent-base) 14%, transparent);
  --dmp-agent-line: color-mix(in srgb, var(--dmp-agent-base) 45%, transparent);
}

[data-product-theme="paper"] [data-agent],
[data-product-theme="paper"][data-agent] {
  --dmp-agent-text: var(--dmp-agent-on-light);
  --dmp-agent-wash: color-mix(in srgb, var(--dmp-agent-base) 12%, transparent);
  --dmp-agent-line: color-mix(in srgb, var(--dmp-agent-base) 55%, transparent);
}

[data-agent="berry"] {
  --dmp-agent-base: var(--dm-berry);
  --dmp-agent-on-dark: var(--dm-berry-light);
  --dmp-agent-on-light: var(--dm-berry-dark);
  --dmp-on-agent: var(--dm-paper);
}

[data-agent="teal"] {
  --dmp-agent-base: var(--dm-agent-teal);
  --dmp-agent-on-dark: #7db8b0;
  --dmp-agent-on-light: #2b6560;
  --dmp-on-agent: var(--dm-ink);
}

[data-agent="cobalt"] {
  --dmp-agent-base: var(--dm-agent-cobalt);
  --dmp-agent-on-dark: #8aa4d4;
  --dmp-agent-on-light: #334f7a;
  --dmp-on-agent: var(--dm-paper);
}

[data-agent="sage"] {
  --dmp-agent-base: var(--dm-agent-sage);
  --dmp-agent-on-dark: #a7b89a;
  --dmp-agent-on-light: #4d6343;
  --dmp-on-agent: var(--dm-ink);
}

[data-agent="amber"] {
  --dmp-agent-base: var(--dm-agent-amber);
  --dmp-agent-on-dark: #e0b57a;
  --dmp-agent-on-light: #8c5c24;
  --dmp-on-agent: var(--dm-ink);
}

/* Graphite slot for MCP-only, offline, and personal rows: present in the
   roster, but not competing with live agent color. */
[data-agent="graphite"] {
  --dmp-agent-base: var(--dm-graphite-dark);
  --dmp-agent-on-dark: var(--dm-graphite-mid);
  --dmp-agent-on-light: var(--dm-graphite-dark);
  --dmp-on-agent: var(--dm-paper);
}

/* ============================================================ motion floor */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dmp-fast: 1ms;
    --dmp-base: 1ms;
    --dmp-slow: 1ms;
  }
}