/* Design tokens. Custom properties pierce shadow DOM, so a Lit component reads
   these without importing anything — which is why this is a stylesheet and not
   a `css` tagged template.

   Two rules the palette encodes:

   1. COLOUR IS A ROLE, NOT A PERSON. Teal is always "my own agent", purple
      always "the agent asking me". On Brian's phone Chom is purple; on Carol's,
      Brian is. If colour tracked identity, three agents would need three hues
      and the scheme would break exactly when the graph gets interesting.
   2. TWO ARCHETYPES ONLY. `agent-speaking` — orb dominant, <=10 words. And
      `agent-showing` — text dominant, orb demoted to a 22px corner badge that
      keeps its colour. Anything that needs a third is a design question, not a
      new token.

   Scope a subtree with data-agent="theirs" to flip the whole screen. */

:root {
  /* --- palette: mode-stable, never referenced directly by components ------ */
  --mine-50:  #e1f5ee;  --mine-100: #9fe1cb;  --mine-200: #5dcaa5;
  --mine-400: #1d9e75;  --mine-600: #0f6e56;  --mine-800: #085041;
  --mine-900: #04342c;  --mine-field: #0c1614;  --mine-panel: #17211e;

  --theirs-50:  #eeedfe;  --theirs-100: #cecbf6;  --theirs-200: #afa9ec;
  --theirs-400: #7f77dd;  --theirs-600: #534ab7;  --theirs-800: #3c3489;
  --theirs-900: #26215c;  --theirs-field: #100c1a;  --theirs-panel: #1c1730;

  --ink-0:   #ffffff;  --ink-50:  #f1efe8;  --ink-200: #d3d1c7;
  --ink-300: #b4b2a9;  --ink-500: #888780;  --ink-600: #5f5e5a;
  --ink-800: #444441;  --ink-900: #2c2c2a;

  --warn: #ba7517;

  /* --- semantics: default scope is the principal's own agent ------------- */
  --field:    var(--mine-field);
  --panel:    var(--mine-panel);
  --hairline: var(--mine-panel);
  --text:      var(--mine-50);
  --text-dim:  var(--ink-200);
  --text-faint: var(--ink-500);
  --accent:      var(--mine-400);   /* CTA fill, scan reticle */
  --accent-soft: var(--mine-200);   /* eyebrow labels, quiet affirmatives */
  --accent-deep: var(--mine-900);   /* text ON --accent */
  --accent-edge: var(--mine-600);   /* outline buttons, field borders */
  --orb: radial-gradient(circle at 38% 34%,
         var(--mine-100) 0%, var(--mine-400) 42%, var(--mine-600) 68%, var(--mine-900) 100%);
  --orb-glow: 0 0 46px 6px rgb(29 158 117 / 0.55);
}

[data-agent="theirs"] {
  --field:    var(--theirs-field);
  --panel:    var(--theirs-panel);
  --hairline: var(--theirs-panel);
  --text:      var(--theirs-50);
  --accent:      var(--theirs-400);
  --accent-soft: var(--theirs-200);
  --accent-deep: var(--theirs-900);
  --accent-edge: var(--theirs-600);
  --orb: radial-gradient(circle at 38% 34%,
         var(--theirs-100) 0%, var(--theirs-400) 42%, var(--theirs-600) 68%, var(--theirs-900) 100%);
  --orb-glow: 0 0 46px 6px rgb(127 119 221 / 0.5);
}

/* Carol's consent page and nothing else. A cold link from an unfamiliar domain
   with a dark field and a glowing CTA reads as an airdrop scam; light and
   slightly boring is the visual grammar of a legitimate business asking for
   something. Brand consistency is worth nothing to someone who has never seen
   the brand. See docs/00-charter.md §3. */
[data-surface="cold"] {
  --field:    var(--ink-50);
  --panel:    var(--ink-0);
  --hairline: var(--ink-200);
  --text:      var(--ink-900);
  --text-dim:  var(--ink-600);
  --text-faint: var(--ink-500);
  --accent:      var(--ink-900);
  --accent-soft: var(--ink-600);
  --accent-deep: var(--ink-50);
  --accent-edge: var(--ink-300);
}

:root {
  /* --- type: five steps. A sixth means a screen is doing too much. ------- */
  --t-display: 22px;  /* the one sentence the agent is saying */
  --t-title:   18px;
  --t-body:    15px;
  --t-meta:    13px;
  --t-label:   11px;  /* eyebrows; pair with --tracking-label */
  --tracking-label: 0.06em;
  --leading: 1.45;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-screen: 26px;  --r-card: 12px;  --r-input: 10px;  --r-pill: 999px;
  --s-1: 6px;  --s-2: 10px;  --s-3: 14px;  --s-4: 20px;  --s-5: 30px;

  --orb-lg: 130px;  --orb-badge: 22px;
  --breathe: 2.4s;  /* listening pulse; amplitude-driven at capture time */
}

/* A still orb reads as wallpaper, but a pulsing one is motion the viewer did
   not ask for. Honour the preference. */
@media (prefers-reduced-motion: reduce) {
  :root { --breathe: 0s; }
}

/* The field is the page, not a card on it. Set here rather than on a component
   so the background survives before Lit hydrates. */
html, body {
  margin: 0;
  background: var(--field);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}