/*
  Frontgate Operations — design tokens
  Every value is measured from the recovered source (source/replica.css,
  source/avatars.css, source/pilot.css) unless marked SUBSTITUTE.
  Prefix: --fg-*. Dark only (color-scheme: dark).
*/
:root {
  /* ---------- Color · surfaces (darkest → lightest) ---------- */
  --fg-color-thread: #070707;          /* chat + Computer panel background */
  --fg-color-page: #101010;            /* page behind the window */
  --fg-color-sidebar: #111111;         /* roster column */
  --fg-color-field: #161616;           /* textarea fill */
  --fg-color-composer: #181818;        /* composer pill */
  --fg-color-artifact: #202020;        /* pilot artifact card */
  --fg-color-popover: #222222;         /* popovers / settings */
  --fg-color-bubble-bot: #262626;      /* bot bubble, voice button */
  --fg-color-button: #373737;          /* secondary in-thread button */
  --fg-color-bubble-human: #5a5a5a;    /* human bubble */

  /* ---------- Color · ink ---------- */
  --fg-color-ink: #f2f2f2;                         /* primary text, primary button fill */
  --fg-color-ink-secondary: rgb(242 242 242 / 62%); /* previews, captions, meta in artifacts */
  --fg-color-ink-muted: rgb(242 242 242 / 45%);     /* placeholders, roster timestamps */
  --fg-color-ink-on-human: #fcfcfc;                 /* text on human bubble */
  --fg-color-ink-on-primary: #161616;               /* text on primary (Approve) button */
  --fg-color-ink-on-send: #111111;                  /* send arrow */
  --fg-color-error: #ffc4a2;                        /* inline pilot error */

  /* ---------- Color · lines and interaction ---------- */
  --fg-color-border: rgb(242 242 242 / 16%);   /* window, search, composer, popover */
  --fg-color-divider: rgb(242 242 242 / 11%);  /* roster right edge (inset shadow) */
  --fg-color-artifact-border: #383838;
  --fg-color-rule: #3e3e3e;                    /* table rows, decision separators */
  --fg-color-field-border: #5b5b5b;            /* textarea */
  --fg-color-field-focus: #7c7c7c;             /* search / composer border on focus-within */
  --fg-color-hover: rgb(119 119 119 / 17%);    /* hover fill, search fill, attach fill */
  --fg-color-selected: rgb(119 119 119 / 35%); /* selected roster row */
  --fg-color-focus-ring: #a582ff;              /* 2px keyboard focus ring */
  --fg-color-action-cta: #a582ff;               /* primary action on a chat card */
  --fg-color-action-cta-hover: #b498ff;
  --fg-color-scrollbar: #292929;
  --fg-shadow-popover: 0 8px 24px #0009;

  /* ---------- Color · window chrome ---------- */
  --fg-color-traffic-close: #ff5f57;
  --fg-color-traffic-minimize: #febc2e;
  --fg-color-traffic-zoom: #28c840;
  --fg-color-traffic-edge: rgb(0 0 0 / 20%);

  /* ---------- Color · avatars ---------- */
  --fg-color-pilot: #f5be45;                      /* the single amber Zillow pilot face */
  --fg-color-pilot-eye: #452b10;
  --fg-color-pilot-highlight: rgb(255 246 198 / 34%);
  --fg-color-pilot-shade: rgb(146 78 0 / 18%);
  /* SUBSTITUTE: neutral placeholder faces (original avatar0–9 art was not recovered) */
  --fg-color-face-1: #d4d4d4;
  --fg-color-face-2: #b3b3b3;
  --fg-color-face-3: #949494;
  --fg-color-face-4: #777777;
  --fg-color-face-5: #c4c0b8;
  --fg-color-face-eye: #1a1a1a;
  --fg-color-face-highlight: rgb(255 255 255 / 24%);
  --fg-color-face-shade: rgb(0 0 0 / 18%);

  /* ---------- Color · avatar status ---------- */
  --fg-color-status-ring: #161616;               /* 2px ring separating the dot from the face */
  --fg-color-status-waiting: #f3bb53;            /* evidence missing — amber dot + vertical tick */
  --fg-color-status-waiting-glyph: #3c2a0f;
  --fg-color-status-working: #b898ff;            /* checking / preparing — violet dot */
  --fg-color-status-verified: #6fe4b9;           /* evidence verified — mint dot + check */
  --fg-color-status-verified-glyph: #103d2c;

  /* ---------- Typography ---------- */
  /* SUBSTITUTE: "GrokReference" is the recovered reference face. It is not bundled;
     the stack falls back to the local system UI font. No network fonts. */
  --fg-font-family: GrokReference, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fg-font-size-body: 14px;     --fg-line-height-body: 20px;    /* bubbles, names, composer */
  --fg-font-size-small: 13px;    --fg-line-height-small: 18px;   /* previews, routines, artifact body */
  --fg-font-size-meta: 12px;     --fg-line-height-meta: 16px;    /* timestamps, section labels, tables, sources */
  --fg-font-size-glyph: 18px;                                    /* send arrow */
  --fg-line-height-heading: 1.3;                                 /* artifact h3 (13px) */
  --fg-weight-regular: 400;
  --fg-weight-medium: 500;   /* bot name, header name, footer buttons */
  --fg-weight-bold: 700;     /* strong / th / h3 in artifacts (UA default bold) */

  /* ---------- Spacing (px scale used by the shell) ---------- */
  --fg-space-2: 2px;
  --fg-space-4: 4px;
  --fg-space-6: 6px;
  --fg-space-8: 8px;
  --fg-space-10: 10px;
  --fg-space-12: 12px;
  --fg-space-16: 16px;
  --fg-space-20: 20px;
  /* Measured artifact fine-tuning (pilot.css): 3, 5, 9, 11 px */
  --fg-space-3: 3px;
  --fg-space-5: 5px;
  --fg-space-9: 9px;
  --fg-space-11: 11px;

  /* ---------- Radii ---------- */
  --fg-radius-field: 6px;      /* textarea; bubble tail corner */
  --fg-radius-control: 7px;    /* icon button, in-thread button */
  --fg-radius-input: 8px;      /* search, routine row, wallpaper */
  --fg-radius-row: 10px;       /* roster row, footer button, popover */
  --fg-radius-card: 12px;      /* pilot artifact */
  --fg-radius-bubble: 16px;    /* message bubble */
  --fg-radius-window: 16px;    /* window */
  --fg-radius-pill: 30px;      /* composer */
  --fg-radius-round: 50%;      /* traffic lights, composer actions, status dot */
  --fg-radius-face: 43% 36% 42% 36%; /* avatar silhouette */

  /* ---------- Sizes and layout (desktop reference) ---------- */
  --fg-size-window-width: 1024px;
  --fg-size-window-height: 768px;
  --fg-size-roster: 280px;
  --fg-size-chat: 422px;              /* derived: 1024 − 2 (border) − 280 − 320 */
  --fg-size-computer: 320px;
  --fg-size-toolbar: 44px;
  --fg-size-composer: 44px;
  --fg-size-transcript-reserve: 56px; /* transcript bottom margin under the composer */
  --fg-size-control: 28px;            /* icon button, attach / voice / send */
  --fg-size-search: 32px;
  --fg-size-row: 54px;                /* roster row */
  --fg-size-footer-row: 40px;
  --fg-size-routine: 48px;
  --fg-size-icon: 14px;
  --fg-size-traffic: 14px;
  --fg-size-avatar-roster: 36px;  --fg-size-status-roster: 9px;
  --fg-size-avatar-header: 20px;  --fg-size-status-header: 7px;
  --fg-size-bubble-max: 300px;
  --fg-size-artifact-max: 365px;

  /* ---------- Motion ---------- */
  --fg-ease-settle: cubic-bezier(.2, .8, .3, 1);
  --fg-duration-lift: 180ms;       /* roster hover / focus avatar lift */
  --fg-duration-arrive: 230ms;     /* header avatar on bot switch */
  --fg-duration-confirm: 340ms;    /* verified — once */
  --fg-duration-attention: 440ms;  /* waiting — once */
  --fg-duration-work: 820ms;       /* checking / preparing — loops while in flight */
}