/*
 * WP Query Lab canonical design tokens.
 *
 * All public-page styles resolve shared typography, color, spacing and shape
 * values from this file. Component files may add measured geometry tokens,
 * but must not introduce near-duplicate brand or text values.
 */

:root {
  --wpq-font-sans: "Noto Sans JP", sans-serif;
  --wpq-font-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --wpq-weight-regular: 400;
  --wpq-weight-medium: 500;
  --wpq-weight-bold: 700;

  --wpq-color-ink: #14213d;
  --wpq-color-copy: #42546e;
  --wpq-color-muted: #62738a;
  --wpq-color-line: #d8e3f2;
  --wpq-color-line-soft: #e7edf6;
  --wpq-color-line-strong: #bfcde0;
  --wpq-color-blue: #075bf2;
  --wpq-color-green: #119b53;
  --wpq-color-orange: #c85b00;
  --wpq-color-violet: #7b3fe4;
  --wpq-color-danger: #b91c1c;
  --wpq-color-rating: #facc15;
  /* Exact brand accents remain available for icons and large marks. */
  --wpq-color-green-text: #0b7e42;
  --wpq-color-orange-text: #a94700;
  --wpq-color-violet-text: var(--wpq-color-violet);
  --wpq-color-footer: #0d214d;
  --wpq-color-footer-deep: #101d35;
  --wpq-color-footer-line: #334563;
  --wpq-color-footer-muted: #c5d0df;
  --wpq-color-surface: #ffffff;
  --wpq-color-surface-subtle: #f8fbff;
  --wpq-color-surface-muted: #f7f9fc;
  --wpq-color-blue-subtle: #edf5ff;
  --wpq-color-blue-focus: rgba(7, 91, 242, 0.16);
  --wpq-color-green-subtle: #effbf5;
  --wpq-color-orange-subtle: #fff6ea;
  --wpq-color-violet-subtle: #f3efff;
  --wpq-color-danger-subtle: #fef2f2;
  --wpq-color-danger-line: #fecaca;
  --wpq-color-green-line: #bbf7d0;
  --wpq-color-orange-line: #fde68a;
  --wpq-color-violet-line: #ddd6fe;

  /* Shared footer and code roles are intentionally named; they are not
   * interchangeable route-local blues, greens, or pinks. */
  --wpq-color-footer-eyebrow: #8fb8ff;
  --wpq-color-footer-copy: #adc0d8;
  --wpq-color-footer-meta: #a8bdd7;
  --wpq-color-code-surface: #0f1b2d;
  --wpq-color-code-copy: #dce8f6;
  --wpq-color-code-key: #facc15;
  --wpq-color-code-string: #a7f3d0;
  --wpq-color-code-variable: #8bd4ff;
  --wpq-color-code-keyword: #f9a8d4;
  --wpq-color-code-number: #fdba74;
  --wpq-color-code-function: #c4b5fd;
  --wpq-color-code-comment: #cbd5e1;

  --wpq-type-display: 38px;
  --wpq-type-page-desktop: 32px;
  --wpq-type-page-tablet: 28px;
  --wpq-type-page-compact: 26px;
  --wpq-type-brand: 25px;
  --wpq-type-page-mobile-wide: 23px;
  --wpq-type-title: 22px;
  --wpq-type-title-compact: 21px;
  --wpq-type-heading: 20px;
  --wpq-type-section: 18px;
  --wpq-type-subheading: 17px;
  --wpq-type-control: 16px;
  --wpq-type-subsection: 15px;
  --wpq-type-body: 14px;
  --wpq-type-copy-strong: 13.5px;
  --wpq-type-copy: 13px;
  --wpq-type-small-strong: 12.5px;
  --wpq-type-small: 12px;
  --wpq-type-label: 11.5px;
  --wpq-type-meta: 11px;
  --wpq-type-micro-floor: 10.5px;
  --wpq-leading-tight: 1.35;
  --wpq-leading-heading: 1.5;
  --wpq-leading-copy: 1.65;
  --wpq-leading-body: 1.75;
  --wpq-tracking-default: 0;

  --wpq-space-0-5: 2px;
  --wpq-space-1px: 1px;
  --wpq-space-3px: 3px;
  --wpq-space-1: 4px;
  --wpq-space-5px: 5px;
  --wpq-space-1-5: 6px;
  --wpq-space-7px: 7px;
  --wpq-space-2: 8px;
  --wpq-space-9px: 9px;
  --wpq-space-2-5: 10px;
  --wpq-space-11px: 11px;
  --wpq-space-3: 12px;
  --wpq-space-13px: 13px;
  --wpq-space-3-5: 14px;
  --wpq-space-15px: 15px;
  --wpq-space-4: 16px;
  --wpq-space-17px: 17px;
  --wpq-space-4-5: 18px;
  --wpq-space-19px: 19px;
  --wpq-space-5: 20px;
  --wpq-space-22px: 22px;
  --wpq-space-23px: 23px;
  --wpq-space-6: 24px;
  --wpq-space-26px: 26px;
  --wpq-space-27px: 27px;
  --wpq-space-6-5: 28px;
  --wpq-space-30px: 30px;
  --wpq-space-7: 32px;
  --wpq-space-34px: 34px;
  --wpq-space-7-5: 36px;
  --wpq-space-8: 40px;
  --wpq-space-8-5: 44px;
  --wpq-space-9: 48px;

  --wpq-radius-small: 3px;
  --wpq-radius-medium: 5px;
  --wpq-radius-control: 6px;
  --wpq-control-height: 42px;
  --wpq-shell: 1280px;
  --wpq-rail: 252px;
  --wpq-category-mobile-detail-indent: 78px;
  --wpq-update-mobile-copy-indent: 89px;
  --wpq-update-timeline-indent: 93px;
}