/*
 * Pinparse design tokens. Source of truth for colour, type, radius and
 * elevation in every UI (dashboard, studio, landing page). See README.md
 * for usage rules; contrast ratios listed are WCAG 2 against --pp-paper.
 *
 * Load the fonts from Google Fonts:
 * family=Bricolage+Grotesque:opsz,wght@12..96,500..800
 * family=Instrument+Sans:wght@400..700
 * family=JetBrains+Mono:wght@400..600
 */
:root {
  /* Ink: text and primary buttons. 18:1 */
  --pp-ink: #0b1530;
  /* Secondary text. 7.5:1 */
  --pp-ink-2: #4a5470;
  /* Captions, placeholders. 4.9:1 (4.5:1 on --pp-paper-2) */
  --pp-ink-3: #626b86;

  --pp-paper: #ffffff;
  /* Subtle surfaces: sidebars, table stripes, code gutters. */
  --pp-paper-2: #f5f6fa;
  --pp-line: #e3e6ef;

  /*
   * The pin. Graphics, focus rings, selection boxes, the logo dot. White
   * text on it is only 3.4:1, so it is never a button fill; use
   * --pp-pin-text for coral text.
   */
  --pp-pin: #ff4a2b;
  --pp-pin-text: #d2361b; /* 4.9:1 */
  --pp-pin-wash: #fff0ec;

  /*
   * Point grid: the dotted 24px layout grid behind heroes and empty
   * states, and the tick colour of the PDF-point ruler. Texture only.
   */
  --pp-grid: #d6dbe7;

  /*
   * Status colours mirror the engine's statuses one to one, so a value
   * looks the same in the API docs, the review UI and the studio.
   */
  --pp-ok: #0b7f57; /* ok, parsed. 5.0:1 */
  --pp-flag: #a35f00; /* needs_review, flagged. 5.0:1 */
  --pp-invalid: #c7291c; /* invalid, failed. 5.6:1 */
  --pp-missing: #626b86; /* not_found, unrecognized */
  --pp-ambiguous: #6a45f0; /* ambiguous. 5.6:1 */

  --pp-font-display:
    "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui,
    sans-serif;
  --pp-font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --pp-font-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pp-radius-s: 6px;
  --pp-radius-m: 10px;
  --pp-radius-l: 16px;

  --pp-shadow-card:
    0 1px 2px rgb(11 21 48 / 0.06), 0 8px 24px -8px rgb(11 21 48 / 0.12);
  --pp-shadow-float:
    0 2px 4px rgb(11 21 48 / 0.06), 0 30px 60px -12px rgb(11 21 48 / 0.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pp-ink: #eef1f8;
    --pp-ink-2: #b4bbce;
    --pp-ink-3: #8c94ab;
    --pp-paper: #070d1f;
    --pp-paper-2: #0e1630;
    --pp-line: #1f2a48;
    --pp-grid: #1c2747;
    --pp-pin-text: #ff7a5f;
    --pp-pin-wash: #2a1420;
    --pp-ok: #3dd39a;
    --pp-flag: #f5b544;
    --pp-invalid: #ff7468;
    --pp-missing: #8c94ab;
    --pp-ambiguous: #a893ff;
    --pp-shadow-card:
      0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -8px rgb(0 0 0 / 0.5);
    --pp-shadow-float:
      0 2px 4px rgb(0 0 0 / 0.4), 0 30px 60px -12px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --pp-ink: #eef1f8;
  --pp-ink-2: #b4bbce;
  --pp-ink-3: #8c94ab;
  --pp-paper: #070d1f;
  --pp-paper-2: #0e1630;
  --pp-line: #1f2a48;
  --pp-grid: #1c2747;
  --pp-pin-text: #ff7a5f;
  --pp-pin-wash: #2a1420;
  --pp-ok: #3dd39a;
  --pp-flag: #f5b544;
  --pp-invalid: #ff7468;
  --pp-missing: #8c94ab;
  --pp-ambiguous: #a893ff;
  --pp-shadow-card:
    0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -8px rgb(0 0 0 / 0.5);
  --pp-shadow-float:
    0 2px 4px rgb(0 0 0 / 0.4), 0 30px 60px -12px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}