/* ============================================================================
 * PKC Brain — design tokens
 *
 * Lineage: the surface/ink/line ladder, the density variables and the token
 * vocabulary are carried over from QQEbeta (apps/web/src/styles-tokens.css and
 * docs/specs/UI/claude design docs/tokens-v2.css) so the two apps read as one
 * toolkit rather than two products. What is NOT carried over is QQEbeta's sage
 * accent and terracotta warning: in this app colour is not decoration, it is
 * information. See "the two functional colours" below.
 *
 * Both themes are first class — hard sunlight and a dark workshop are both
 * daily conditions. Every themed value is written once with light-dark(); the
 * theme is chosen by color-scheme, so there is no duplicated dark block to
 * drift out of sync.
 *
 *   default            follows the operating system
 *   data-theme="dark"  forces the workshop theme
 *   data-theme="light" forces the paper theme
 *
 * Put data-theme on <html>, or on any wrapper to theme a subtree.
 * The brand faces live in fonts/fonts.css and are wired in separately, so this
 * file stays pure tokens and can be read on its own.
 * ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- Ground and surfaces -------------------------------------------- */
  /* Warm neutral, inherited from QQEbeta. Never pure white on pure grey. */
  --pkc-bg: light-dark(#f6f6f4, #17181b);
  --pkc-surface: light-dark(#ffffff, #1e2024);
  --pkc-surface-2: light-dark(#fafaf8, #25272c);
  --pkc-surface-3: light-dark(#f0efec, #2d3036);

  /* ---- Ink ------------------------------------------------------------- */
  --pkc-ink: light-dark(#0f1012, #ecebe6); /* primary text */
  --pkc-ink-2: light-dark(#3a3c40, #c5c3bd); /* secondary text */
  --pkc-muted: light-dark(#72757b, #8c8a83); /* labels, metadata */
  --pkc-muted-2: light-dark(#a6a8ae, #5e5b54); /* disabled, placeholder */

  /* ---- Rules ----------------------------------------------------------- */
  /* Hairlines do the work that boxes and shadows do elsewhere. */
  --pkc-line: light-dark(#e6e5e1, #34373d); /* structural divider */
  --pkc-line-2: light-dark(#efeeeb, #2a2d32); /* row separator, lighter */

  /* ---- The two functional colours -------------------------------------
   * These are the ONLY colours in the system. If something is coloured, it
   * means something. There is deliberately no green: "done" is not a colour,
   * done items leave the list.
   * -------------------------------------------------------------------- */

  /* Red pen — the mark you make on a drawing when something has changed or
     gone wrong. Overdue, broken promises, stale blockers, unquoted variations,
     failing health checks. Never used for emphasis. */
  --pkc-redpen: light-dark(#b4402a, #e8705a);
  --pkc-redpen-wash: light-dark(rgba(180, 64, 42, 0.08), rgba(232, 112, 90, 0.14));
  --pkc-redpen-line: light-dark(rgba(180, 64, 42, 0.28), rgba(232, 112, 90, 0.32));

  /* Highlighter — brass, taken from the Perth Kitchen Crafters brand. Marks
     what needs you NOW. Used as a wash behind text, never as a solid fill:
     that is both the drafting convention and the only accessible way to use
     it, since brass on paper is far too low-contrast to be text. */
  --pkc-highlight: light-dark(#daa14c, #daa14c);
  --pkc-highlight-wash: light-dark(rgba(218, 161, 76, 0.22), rgba(218, 161, 76, 0.18));
  --pkc-highlight-line: light-dark(rgba(218, 161, 76, 0.55), rgba(218, 161, 76, 0.45));

  /* ---- Dimension lines -------------------------------------------------
   * The signature. A recorded fact is drawn the way a measured quantity is
   * drawn on a shop drawing: extension line, tick, value. Inference gets
   * plain type and a provenance chip instead. The drafting convention IS the
   * provenance marker, which is why it needs no legend — Vincent reads it
   * every working day.
   * -------------------------------------------------------------------- */
  --pkc-dim-line: light-dark(#9a9d9f, #6f747c);
  --pkc-dim-tick-height: 9px;
  --pkc-dim-stroke: 1px;

  /* ---- Type ------------------------------------------------------------ */
  /* All three faces are shipped in fonts/. The fallbacks go straight to the
     system stack — naming a font the system doesn't have and we don't ship
     just moves the problem somewhere it can't be seen. */
  --pkc-font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --pkc-font-mono: 'Geist Mono', ui-monospace, monospace;
  /* The instrument faceplate. Wide and engineered. Used with restraint —
     the brief's hero line and screen titles, nothing else. */
  --pkc-font-display: 'Archivo Expanded', 'Geist', system-ui, sans-serif;

  /* Set larger than a desktop product would be: read at arm's length, in sun,
     through safety glasses. */
  --pkc-text-hero: 25px; /* the brain's own sentence on Today */
  --pkc-text-title: 20px; /* screen titles */
  --pkc-text-h1: 18px;
  --pkc-text-h2: 16px;
  --pkc-text-body: 15px; /* base */
  --pkc-text-small: 13.5px;
  --pkc-text-label: 11.5px; /* mono, uppercase, tracked */
  --pkc-text-caption: 10.5px;

  --pkc-leading-tight: 1.2;
  --pkc-leading-snug: 1.35;
  --pkc-leading-body: 1.5;
  --pkc-leading-loose: 1.6; /* narrative prose */

  --pkc-weight-regular: 400;
  --pkc-weight-medium: 500;
  --pkc-weight-bold: 600;

  --pkc-tracking-display: -0.02em;
  --pkc-tracking-tight: -0.018em;
  --pkc-tracking-normal: -0.008em;
  --pkc-tracking-label: 0.06em; /* mono micro-labels */

  /* ---- Space ------------------------------------------------------------ */
  --pkc-space-1: 4px;
  --pkc-space-2: 8px;
  --pkc-space-3: 12px;
  --pkc-space-4: 16px;
  --pkc-space-5: 20px;
  --pkc-space-6: 24px;
  --pkc-space-8: 32px;
  --pkc-space-10: 40px;
  --pkc-space-14: 56px; /* between major sections on a screen */

  /* ---- Touch ------------------------------------------------------------
   * Read one-handed, standing, with dust or glue on your hands. Nothing
   * interactive is ever smaller than this.
   * -------------------------------------------------------------------- */
  --pkc-touch-min: 44px;
  --pkc-row-pad: 14px;

  /* ---- Shape and depth --------------------------------------------------
   * Shadows are almost absent. Structure comes from hairlines, the way it
   * does on a drawing.
   * -------------------------------------------------------------------- */
  --pkc-radius-sm: 5px;
  --pkc-radius: 8px;
  --pkc-radius-lg: 12px;
  --pkc-shadow-sheet: light-dark(
    0 -2px 24px rgba(15, 16, 18, 0.1),
    0 -2px 24px rgba(0, 0, 0, 0.5)
  );

  /* ---- Motion -----------------------------------------------------------
   * Almost none. One place only: a cut-list row leaving the list. That is the
   * reward loop of the entire product and the one moment worth animating.
   * -------------------------------------------------------------------- */
  --pkc-transition-fast: 120ms ease-out;
  --pkc-strike-duration: 260ms;
  --pkc-strike-ease: cubic-bezier(0.32, 0, 0.67, 0);
}

[data-theme='dark'] {
  color-scheme: dark;
}

[data-theme='light'] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pkc-transition-fast: 0ms;
    --pkc-strike-duration: 0ms;
  }
}

/* ---- Base -------------------------------------------------------------
 * Applied by the PkcRoot wrapper rather than to bare <body>, so the design
 * system never fights a host page for control of the document.
 * ---------------------------------------------------------------------- */
.pkc-root {
  background: var(--pkc-bg);
  color: var(--pkc-ink);
  font-family: var(--pkc-font-sans);
  font-size: var(--pkc-text-body);
  line-height: var(--pkc-leading-body);
  letter-spacing: var(--pkc-tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

.pkc-root *,
.pkc-root *::before,
.pkc-root *::after {
  box-sizing: border-box;
}

/* Every figure in this app is a number in a column. They must align. */
.pkc-root [class^='pkc-'] {
  font-variant-numeric: tabular-nums;
}