/**
 * Prime Connect design tokens — the single source of truth for the marketing site and
 * the application. Both load these, so the landing page and the product cannot
 * drift apart.
 *
 * The neutrals carry a warm bias (a touch of yellow, not a dead 50% grey) so
 * that stamp-blue reads as deliberate against them rather than accidental.
 */

:root {
  color-scheme: light;

  /* Ground */
  --page: #f7f7f4;
  --surface: #fcfcfb;
  --surface-sunk: #f0efec;

  /* Ink */
  --ink: #101010;
  --ink-2: #52514e;
  --ink-muted: #8a8781;

  /* Rules — hairline for dividers, heavy for section breaks */
  --rule: #e3e2db;
  --rule-strong: #c3c2b7;

  /* Brand. `brand` is the identity blue and stays put; `action` is the lighter,
     more legible blue used for links and buttons inside the product. */
  --brand: #153e6e;
  --brand-soft: #e8eef6;
  --action: #2a6fd6;

  /* Semantic state — separate from the accent, never used decoratively.
     Critical is the deadline colour, and it is the only red on the page. */
  --critical: #c8372f;
  --critical-soft: rgba(200, 55, 47, 0.09);
  --warning: #b07600;
  --warning-soft: rgba(250, 178, 25, 0.14);
  --good: #0c7a3e;

  /* Type */
  --font-display: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-data: var(--font-display);

  /* Type scale — 1.25 minor third, rounded to whole pixels */
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 16px;
  --t-md: 20px;
  --t-lg: 25px;
  --t-xl: 34px;
  --t-2xl: 46px;
  --t-3xl: 60px;

  /* Space — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;

  --radius: 3px;
  --measure: 66ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --page: #0c0d0c;
    --surface: #161716;
    --surface-sunk: #1e1f1d;
    --ink: #f5f5f2;
    --ink-2: #c3c2b7;
    --ink-muted: #8a8781;
    --rule: #2a2b29;
    --rule-strong: #3d3e3b;
    /* Stamp-blue is too dark to read on near-black; lift it rather than invert. */
    --brand: #7fb0ee;
    --brand-soft: #16233a;
    --action: #4a90e8;
    --critical: #e8635a;
    --critical-soft: rgba(232, 99, 90, 0.12);
    --warning: #e0a52a;
    --warning-soft: rgba(224, 165, 42, 0.14);
    --good: #3fbf6e;
  }
}

/* The viewer's own toggle must beat the OS preference, in both directions. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --page: #0c0d0c;
  --surface: #161716;
  --surface-sunk: #1e1f1d;
  --ink: #f5f5f2;
  --ink-2: #c3c2b7;
  --ink-muted: #8a8781;
  --rule: #2a2b29;
  --rule-strong: #3d3e3b;
  --brand: #7fb0ee;
  --brand-soft: #16233a;
  --action: #4a90e8;
  --critical: #e8635a;
  --critical-soft: rgba(232, 99, 90, 0.12);
  --warning: #e0a52a;
  --warning-soft: rgba(224, 165, 42, 0.14);
  --good: #3fbf6e;
}

:root[data-theme='light'] {
  color-scheme: light;
  --page: #f7f7f4;
  --surface: #fcfcfb;
  --surface-sunk: #f0efec;
  --ink: #101010;
  --ink-2: #52514e;
  --ink-muted: #8a8781;
  --rule: #e3e2db;
  --rule-strong: #c3c2b7;
  --brand: #153e6e;
  --brand-soft: #e8eef6;
  --action: #2a6fd6;
  --critical: #c8372f;
  --critical-soft: rgba(200, 55, 47, 0.09);
  --warning: #b07600;
  --warning-soft: rgba(250, 178, 25, 0.14);
  --good: #0c7a3e;
}