/* Agent Office brand tokens.
   Every colour, type and spacing value the site uses is defined here and
   documented in /BRAND.md, with the contrast of every text/background pair
   in both themes (checked by tools/check_site.py). Status colours are kept
   apart from the brand colours on purpose. */

:root {
  color-scheme: light dark;

  /* ---- Palette, light theme ---------------------------------------- */
  --ao-paper: #f6f5f1;        /* page background: warm paper */
  --ao-surface: #ffffff;      /* cards, tables, form fields */
  --ao-sunken: #ecebe5;       /* code, quiet panels */
  --ao-ink: #1a1f26;          /* body text */
  --ao-ink-muted: #4a525e;    /* secondary text */
  --ao-line: #d9d5cb;         /* hairlines and card borders (decorative) */
  --ao-line-strong: #767d88;  /* form field borders: 3:1 or more */

  --ao-brand: #1f3a5f;        /* ink blue: links, buttons, the mark */
  --ao-brand-strong: #132a47; /* hover and pressed */
  --ao-on-brand: #ffffff;     /* text on --ao-brand */
  --ao-brand-tint: #e6ebf2;   /* quiet brand panels */

  --ao-accent: #85561a;       /* brass: eyebrow labels (text-safe) */
  --ao-accent-rule: #b98a3e;  /* brass hairlines (decorative only) */

  /* Status: never used as brand colour */
  --ao-ok-ink: #1d5e36;
  --ao-ok-bg: #e2f0e6;
  --ao-warn-ink: #5c3d00;
  --ao-warn-bg: #fbefc8;
  --ao-warn-line: #9a6f10;
  --ao-risk-ink: #8c1c1c;
  --ao-risk-bg: #f7e3e0;

  --ao-focus: #1f3a5f;        /* focus ring */
  --ao-shot-bg: #e3e1da;      /* screenshot placeholder */
  --ao-scroll-shade: rgb(26 31 38 / 0.22); /* edge shading on a table that scrolls (decorative) */

  /* ---- Type --------------------------------------------------------- */
  /* System stacks on purpose: nothing to download, nothing to license. */
  --ao-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
  --ao-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --ao-text-xs: 0.8125rem;   /* 13px: fine print, badges */
  --ao-text-sm: 0.9375rem;   /* 15px: captions, tables */
  --ao-text-md: 1.0625rem;   /* 17px: body */
  --ao-text-lg: 1.25rem;     /* 20px: lead paragraphs */
  --ao-text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);  /* h3 */
  --ao-text-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); /* h2 */
  --ao-text-3xl: clamp(2rem, 1.45rem + 2.6vw, 3.125rem);    /* h1 */

  --ao-leading: 1.6;
  --ao-leading-tight: 1.2;
  --ao-weight-bold: 650;
  --ao-tracking-caps: 0.14em;  /* eyebrow labels, echoing the wordmark */

  /* ---- Space, shape, motion ---------------------------------------- */
  --ao-space-1: 0.25rem;
  --ao-space-2: 0.5rem;
  --ao-space-3: 0.75rem;
  --ao-space-4: 1rem;
  --ao-space-5: 1.5rem;
  --ao-space-6: 2rem;
  --ao-space-7: 3rem;
  --ao-space-8: 4.5rem;

  --ao-radius: 6px;
  --ao-radius-sm: 4px;
  --ao-measure: 42rem;        /* reading width */
  --ao-wide: 74rem;           /* page width */

  --ao-dur-fast: 120ms;
  --ao-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Palette, dark theme -------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ao-paper: #0f1318;
    --ao-surface: #161b22;
    --ao-sunken: #1d232b;
    --ao-ink: #e8e6e1;
    --ao-ink-muted: #a9b0ba;
    --ao-line: #2d343e;
    --ao-line-strong: #7d8591;

    --ao-brand: #a3bfe3;
    --ao-brand-strong: #c3d6ef;
    --ao-on-brand: #0f1318;
    --ao-brand-tint: #1a2433;

    --ao-accent: #d9ac5f;
    --ao-accent-rule: #8f6a2c;

    --ao-ok-ink: #8fd3a5;
    --ao-ok-bg: #13281b;
    --ao-warn-ink: #f2d38a;
    --ao-warn-bg: #2e2410;
    --ao-warn-line: #a7801f;
    --ao-risk-ink: #f3a9a1;
    --ao-risk-bg: #321715;

    --ao-focus: #a3bfe3;
    --ao-shot-bg: #1f252e;
    --ao-scroll-shade: rgb(232 230 225 / 0.2);
  }
}