/* Touchstone design tokens: the only colours, type sizes, spacing and fonts any of PJ's apps may use.
   Framework-free CSS custom properties. Light on :root, dark under .dark on <html>.
   Rules behind every value: docs/checklist.md (BUILD-PLAYBOOK.md "Typography and spacing rules").
   Tailwind apps import css/tailwind.css instead (it includes this file). */

:root {
  /* ---------- colour ---------- */
  --bg: #fbfbfc;
  --panel: #ffffff;
  --panel-2: #f4f5f7;
  --hover: #eef0f3;
  --border: #e3e5ea;
  --border-strong: #cfd3da;
  --text: #16181d;
  --muted: #5d6370;
  --faint: #697080;   /* 4.7:1 on panel; #7d838f failed axe colour-contrast */
  --accent: #4f46e5;
  --accent-strong: #4f46e5;   /* filled primary buttons */
  --accent-soft: #eef0ff;
  --accent-text: #3730a3;
  --on-accent: #ffffff;
  --good: #15803d;
  --good-soft: #e8f6ed;
  --bad: #c42b2b;
  --bad-soft: #fdecec;
  --warn: #a35a00;
  --warn-soft: #fff3e0;
  --bubble-customer: #f1f2f5;
  --bubble-agent: #eef0ff;

  /* ---------- type: five roles, no more (rule 1) ---------- */
  /* "app" scale (default): dense tools and dashboards. Sites and documents set data-scale="site" on <html>. */
  --fs-small: 12px;     /* labels, table headers, captions, badges, footnotes */
  --fs-body: 14px;      /* body, table cells, controls; the floor for anything that must be read (rule 2) */
  --fs-h2: 16px;        /* section and card titles */
  --fs-h1: 20px;        /* page title; long titles (> 60 chars) drop to h2 (rule 3) */
  --fs-display: 28px;   /* hero numbers or a landing headline, once per page */

  --lh-small: 1.4;
  --lh-body: 1.5;       /* rule 6 */
  --lh-heading: 1.2;    /* rule 6: 1.15 to 1.25 */

  --fw-regular: 400;    /* rule 7: 400 / 500 / 600 only */
  --fw-medium: 500;
  --fw-semibold: 600;

  /* rule 7: the Touchstone families. Geist for everything, Geist Mono for codes and IDs. Never a third.
     Load them: @fontsource-variable/geist + geist-mono (see README), or Google Fonts. */
  --font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 50ch;      /* prose line length: 50ch of Geist "0" is about 70 average characters (rule 6: 60 to 75) */

  /* ---------- spacing: 4 8 12 16 24 32 48 64 96 only (rule 6) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-inner: var(--space-2);    /* inside a component: 8 to 16 */
  --space-block: var(--space-5);    /* between blocks within a section: 24 or 32 */
  --space-section: var(--space-8);  /* between sections: 64 or 96 */
  --pad-card: var(--space-5);       /* card padding, at least 24 (rule 5) */

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-control: var(--radius);   /* buttons, segmented controls; pill in the Touchstone theme */
  --control-h: 32px;

  color-scheme: light;
}

/* Site / document scale: same five roles, larger steps, for landing pages, reports and prose-first pages. */
:root[data-scale="site"] {
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-h2: 20px;
  --fs-h1: 32px;
  --fs-display: 48px;
  --space-section: var(--space-9);
}

.dark {
  --bg: #0e0f12;
  --panel: #15171b;
  --panel-2: #1b1d22;
  --hover: #22252b;
  --border: #2a2d34;
  --border-strong: #3a3e47;
  --text: #e7e9ee;
  --muted: #a0a6b2;
  --faint: #868c99;
  --accent: #8b85ff;
  --accent-strong: #5b54e8;
  --accent-soft: #23234a;
  --accent-text: #c4c1ff;
  --on-accent: #ffffff;
  --good: #4ade80;
  --good-soft: #12301f;
  --bad: #f87171;
  --bad-soft: #3a1717;
  --warn: #fbbf24;
  --warn-soft: #362710;
  --bubble-customer: #1d2026;
  --bubble-agent: #1f2040;
  color-scheme: dark;
}

/* Touchstone brand theme (touchstonerouter.com): black and gold, dark only. <html data-theme="touchstone" class="dark"> */
:root[data-theme="touchstone"], :root[data-theme="touchstone"].dark {
  --bg: #000000;
  --panel: #0c0c0c;
  --panel-2: #181818;
  --hover: #1f1f1f;
  --border: #262626;
  --border-strong: #3d3d3d;
  --text: #f2f2f2;
  --muted: #9b9b9b;
  --faint: #8a8a8a;          /* AA on black, panel and table rows; the app's old #6b6b6b failed */
  --accent: #e3b45a;
  --accent-strong: #e3b45a;
  --accent-soft: #2a2214;
  --accent-text: #efc97c;
  --on-accent: #131209;
  --good: #8cc79b;
  --good-soft: #16201a;
  --bad: #f2846f;
  --bad-soft: #2a1612;
  --warn: #f0a24b;
  --warn-soft: #2a1d0e;
  --bubble-customer: #1f1f1f;
  --bubble-agent: #1d1912;
  --radius-control: 9999px;
  color-scheme: dark;
}