/* tokens.css — the single source of truth for the Amara Home shell.
 *
 * Loaded FIRST, before every other stylesheet. Nothing downstream may
 * hard-code a colour, radius, spacing step, duration or easing curve: if a
 * value is needed and is not here, it gets added here first.
 *
 * Three rules that are not negotiable, restated so they travel with the file:
 *
 *   1. ONE accent. --accent gold, used for the primary send action, active
 *      control state, the focus ring, the rule down the user's own messages,
 *      and the thinking glow. Nothing else.
 *   2. Semantic colours (--state-*) appear ONLY as 6px dots or 1px rings.
 *      Never a filled pill, never a bubble background, never a button fill.
 *   3. Never pure white, never pure black. Use --ink and --bg-void.
 *
 * Dark only, by design. There is no light theme and none is coming.
 */
:root {
  /* ---- Surface ---- */
  --bg-void:          #08080A;
  --panel:            rgba(16, 16, 20, 0.72);
  --panel-solid:      #14141A;
  --panel-raised:     rgba(28, 28, 34, 0.78);
  --scrim-edge:       rgba(8, 8, 10, 0.85);

  /* ---- Hairlines ---- */
  --line:             rgba(255, 255, 255, 0.07);
  --line-strong:      rgba(255, 255, 255, 0.13);

  /* ---- Ink ---- */
  --ink:              rgba(255, 255, 255, 0.92);
  --ink-2:            rgba(255, 255, 255, 0.62);
  --ink-3:            rgba(255, 255, 255, 0.40);
  --ink-4:            rgba(255, 255, 255, 0.22);

  /* ---- Accent (single) ---- */
  --accent:           #D9A441;
  --accent-hi:        #E8BC66;
  --accent-line:      rgba(217, 164, 65, 0.38);
  --accent-soft:      rgba(217, 164, 65, 0.12);
  --accent-glow:      rgba(217, 164, 65, 0.20);

  /* ---- State (dots and rings only, never fills) ---- */
  --state-online:     #45C08A;
  --state-thinking:   #D9A441;
  --state-working:    #6BA8D9;
  --state-blocked:    #E5484D;
  --state-idle:       rgba(255, 255, 255, 0.28);

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- Space (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-14: 56px; --s-18: 72px;

  /* ---- Elevation ---- */
  --blur-panel: blur(28px) saturate(135%);
  --shadow-panel: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --shadow-pop:   0 12px 32px -12px rgba(0, 0, 0, 0.8);

  /* ---- Motion ---- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --t-lazy: 600ms;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.32, 0.72, 0, 1);

  /* ---- Layout ---- */
  --header-h: 56px;
  --gutter: 24px;
  --rail-w: 320px;
  --chat-w: clamp(400px, 30vw, 560px);
}

/* ─────────────────────────────────────────────────────────────────────────
 * PASS 2 — atmosphere and presence.
 *
 * Pass 1 fixed structure. These fix the fact that the render was carrying the
 * whole look and the UI sat on it like a sticker: no grain, no vignette, no
 * bloom, and a hard vertical edge where the video began.
 * ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ---- Atmosphere ---- */
  --grain-opacity: 0.038;
  --vignette: radial-gradient(125% 95% at 50% 40%,
              transparent 28%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,0.62) 100%);
  --bloom-warm: radial-gradient(38% 42% at 76% 46%,
              rgba(217,164,65,0.10), transparent 72%);

  /* Where the loop is framed from. A token because it is a property of the
     CLIP, not of the layout: a new loop with a different composition is
     retuned here rather than in a rule. */
  --stage-focus: 50% 30%;

  /* ---- Glass ---- */
  --glass:           rgba(12, 12, 16, 0.62);
  --glass-heavy:     rgba(10, 10, 13, 0.78);
  --glass-blur:      blur(36px) saturate(140%);

  /* The conversation panel's own wash. Deliberately NOT --glass: every other
     surface here is a small control sitting ON the frame, while the chat panel
     IS most of the frame — full-bleed below 1000px — so the value that makes a
     button read as glass makes the panel read as a film over the clip. The
     text carries its own contrast now (see .msg text-shadow), so this only has
     to take the edge off a bright sky rather than guarantee legibility on its
     own. Raise it if a future clip is blown out; do not add a backdrop blur
     back, which is the part that actually hides her. */
  --stage-wash:      rgba(10, 10, 14, 0.38);
  /* The single inset top highlight. This is the classic glass catch-light and
     it is most of why a surface reads as expensive rather than as a dark box. */
  --glass-edge:      inset 0 1px 0 rgba(255,255,255,0.085);
  --glass-shadow:    0 32px 80px -28px rgba(0,0,0,0.85);
  --glass-spill:     linear-gradient(270deg, rgba(217,164,65,0.055), transparent 42%);

  /* ---- Layout revisions ---- */
  --rail-w: 360px;
  --chat-w: clamp(420px, 30vw, 560px);
  --inset: 20px;   /* how far floating panels sit off the window edge */
  --gutter: 32px;  /* internal padding of floating panels */
}