/* Copied from design/tokens.css by site/build.mjs. Do not edit here. */
/* Ponta design tokens. Source of truth for every ponta.ai page, email and the agent tray.
   Read design/DESIGN.md before changing anything here, then run: node design/contrast-check.mjs
   Ratios in comments are WCAG 2.2 contrast ratios measured by that script on 1 Nov 2026. */

:root {
  color-scheme: light;

  /* Brand (Waypoint). Never change these four without Nick. */
  --ink: #101814;
  --paper: #F5F3EC;
  --jade: #0B7A55;
  --signal: #3FD99A;

  /* Surfaces, light theme */
  --bg: var(--paper);
  --surface: #FBFAF6;          /* raised panels, tables, approval cards */
  --surface-sunk: #EFECE4;     /* wells, code blocks on light, table header */
  --text: var(--ink);          /* 16.27 on bg */
  --text-muted: #4D5650;       /* 6.85 on bg, secondary text */
  --text-subtle: #666C66;      /* 4.85 on bg, 4.56 on sunk; captions and timestamps, never below 14px */
  --border: #DEDAD0;           /* hairline, decorative only (1.26), never the only edge of a control */
  --border-control: #8A8E86;   /* 3.01 on bg: inputs, checkboxes, focusable edges. Not on surface-sunk */

  /* Meaning. One accent per view. Colour is never the only signal: always words too. */
  --accent: var(--jade);       /* 4.81 on bg: primary action, verified, safe */
  --accent-strong: #08664A;    /* 6.28 on bg: hover and pressed, and Jade text on surface-sunk */
  --on-accent: var(--paper);   /* 4.81 on Jade */
  --live: var(--jade);         /* online dot on light grounds. Signal is NOT allowed on Paper (1.63) */
  --danger: #B3261E;           /* 5.89 on bg: deny, destructive, failed */
  --on-danger: #FFFFFF;        /* 6.54 on danger */
  --caution: #8A5300;          /* 5.70 on bg: sensitive, waiting for you */
  --focus: var(--jade);        /* focus ring, 2px, offset 2px */

  /* Type */
  --font-brand: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;   /* wordmark only */
  /* The "Variable" names are what the self-hosted Fontsource packages register; the plain names cover other hosting */
  --font-text: "Bricolage Grotesque Variable", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16, body */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.375rem;  /* 22 */
  --text-2xl: 1.75rem;  /* 28 */
  --text-3xl: 2.25rem;  /* 36 */
  --text-4xl: 3rem;     /* 48, marketing hero only */
  --leading-body: 1.55;
  --leading-tight: 1.15;

  /* Space: 4px base. Use only these. */
  --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;

  /* Radius: one scale */
  --radius-control: 6px;   /* buttons, inputs, key caps */
  --radius-panel: 10px;    /* cards, panels, dialogs */
  --radius-pill: 999px;    /* status chips only */

  /* Elevation by tone first. One shadow, for things that float (popovers, menus, toasts) */
  --shadow-float: 0 1px 2px rgb(16 24 20 / 0.06), 0 8px 24px rgb(16 24 20 / 0.10);

  /* Motion (Emil Kowalski's curves). UI stays under 300ms. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 160ms;
  --dur-fast: 150ms;     /* tooltips, small popovers */
  --dur-base: 200ms;     /* menus, toasts, row inserts */
  --dur-slow: 280ms;     /* dialogs, the new-device arrival */
}

/* Dark theme: Ink ground. Signal is the live colour here. Offered, not the default (see DESIGN.md section 8). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink);
  --surface: #18231D;          /* Paper 14.58, Signal 8.95 */
  --surface-sunk: #0B110E;
  --text: var(--paper);        /* 16.27 */
  --text-muted: #A3ABA5;       /* 7.68 on bg, 6.88 on surface */
  --text-subtle: #8D958F;
  --border: #26322C;
  --border-control: #5E6A64;   /* 3.20 on bg. Not on surface */
  --accent: var(--signal);     /* 9.98 on bg */
  --accent-strong: #6BE6B3;
  --on-accent: var(--ink);
  --live: var(--signal);
  --danger: #FF8B7E;           /* 7.95 on bg */
  --on-danger: var(--ink);
  --caution: #F2B54A;          /* 9.88 on bg */
  --focus: var(--signal);
  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-fast: 120ms; --dur-base: 120ms; --dur-slow: 120ms; }
  /* Keep opacity and colour changes, drop movement: components must not translate or scale under this query. */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: var(--ink);
  --surface: #18231D;          /* Paper 14.58, Signal 8.95 */
  --surface-sunk: #0B110E;
  --text: var(--paper);        /* 16.27 */
  --text-muted: #A3ABA5;       /* 7.68 on bg, 6.88 on surface */
  --text-subtle: #8D958F;
  --border: #26322C;
  --border-control: #5E6A64;   /* 3.20 on bg. Not on surface */
  --accent: var(--signal);     /* 9.98 on bg */
  --accent-strong: #6BE6B3;
  --on-accent: var(--ink);
  --live: var(--signal);
  --danger: #FF8B7E;           /* 7.95 on bg */
  --on-danger: var(--ink);
  --caution: #F2B54A;          /* 9.88 on bg */
  --focus: var(--signal);
  --shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.45);
}
}