/*
 * SkillsetOps design tokens.
 * Source of truth: /01_DESIGN_SYSTEM.md (repo root). Implemented exactly,
 * except where noted below — see README.md "Deviations from the design
 * system doc" for the accessibility-driven substitutions and the spacing
 * scale this file introduces (the doc does not define one numerically).
 */

:root {
  /* ---- Color: light mode (primary) ---- */
  --ink: #16202b;
  --paper: #f2f4f3;
  --surface: #ffffff;
  --slate: #1f5673;
  /*
   * --brass is #B5822E per the design system doc, but that fails 4.5:1 text
   * contrast against --paper (measured 3.07:1). The doc's originally
   * documented fallback, #9A6E24, was implemented here first but itself
   * only measured 4.11:1 — still short. W3-6's accessibility audit closed
   * the gap with #916825 (4.51:1 against --paper, 4.99:1 against
   * --surface) — see packages/design/README.md, "Contrast verification",
   * and 01_DESIGN_SYSTEM.md, which now documents this value directly.
   */
  --brass: #916825;
  --field: #2e6b4f;
  --rule: #c9d1ce;
  --muted: #5c6b76;
  --alert: #8c3a2b;

  /* Derived tints — row/state backgrounds only, 8% opacity over --paper */
  --slate-wash: rgb(31 86 115 / 8%);
  --brass-wash: rgb(145 104 37 / 8%);
  --field-wash: rgb(46 107 79 / 8%);

  /* ---- Typography ---- */
  --font-interface: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-reading: "Source Serif 4", Georgia, "Times New Roman", serif;

  --text-page-title-size: 2.4375rem; /* 39px */
  --text-page-title-weight: 600;
  --text-page-title-leading: 1.15;

  --text-section-size: 1.9375rem; /* 31px */
  --text-section-weight: 600;
  --text-section-leading: 1.2;

  --text-subsection-size: 1.5625rem; /* 25px */
  --text-subsection-weight: 500;
  --text-subsection-leading: 1.25;

  --text-lesson-body-size: 1.1875rem; /* 19px */
  --text-lesson-body-weight: 400;
  --text-lesson-body-leading: 1.65;

  --text-interface-body-size: 1rem; /* 16px */
  --text-interface-body-weight: 400;
  --text-interface-body-leading: 1.5;

  --text-data-label-size: 0.875rem; /* 14px */
  --text-data-label-weight: 500;
  --text-data-label-leading: 1.4;

  --text-fine-print-size: 0.8125rem; /* 13px */
  --text-fine-print-weight: 400;
  --text-fine-print-leading: 1.45;

  --measure-reading: 70ch; /* 66-72 characters, lesson prose */
  --measure-interface: 80ch; /* under 80 characters, interface text */

  /*
   * ---- Spacing ----
   * The design system doc does not define a numeric spacing scale, only
   * specific layout constants (rail width, row height, etc., defined
   * below). This 4px-based scale is a documented extrapolation for
   * consistent spacing between those fixed points — see README.
   */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */

  /* ---- Layout constants ---- */
  --layout-rail-width: 240px;
  --layout-column-max: 1100px;
  --layout-row-min-height: 56px;
  --layout-breakpoint-rail-collapse: 768px;

  /* ---- Borders & radius ---- */
  --radius: 2px; /* inputs and buttons only */
  --radius-none: 0;
  --border-width: 1px;
  --rule-border: var(--border-width) solid var(--rule);

  /* ---- Focus ---- */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-color: var(--slate);
  --focus-ring: var(--focus-width) solid var(--focus-color);

  /* ---- Qualification track ---- */
  --track-segment-height: 4px;
  --track-segment-height-active: 6px;
  --track-segment-gap: 2px;
  --track-fill-duration: 400ms;

  /* ---- Motion ---- */
  --motion-duration: 400ms;
  --motion-duration-instant: 0ms;
}

/* ---- Color: dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8edeb;
    --paper: #16202b;
    --surface: #1d2932;
    /*
     * Same hues as light mode, lightness lifted for 4.5:1 text contrast.
     * The doc's own note here only checked against --paper (#16202B), but
     * --slate/--field/--alert are also used as text/icon color on the
     * lighter --surface (#1D2932) — e.g. the rail's active link, ledger row
     * status text (see 01_DESIGN_SYSTEM.md, "Raised reading surfaces").
     * --surface is the harder background to clear since it's lighter, and
     * the doc's original values (slate #338EBD 4.06:1, field #40966F
     * 4.10:1, alert #CC6B59 4.11:1 against --surface) all fell short —
     * confirmed by the W3-6 automated audit (axe color-contrast, dark
     * scheme, `.rail__link.active`). Lifted further to clear 4.5:1 against
     * --surface too; --brass and --muted already cleared both. See
     * packages/design/README.md, "Contrast verification" for the full
     * measured table.
     */
    --slate: #3697c9;
    --brass: #d2a04e;
    --field: #449f76;
    --rule: #33404a;
    --muted: #9aa8b1;
    --alert: #d07565;

    --slate-wash: rgb(54 151 201 / 8%);
    --brass-wash: rgb(210 160 78 / 8%);
    --field-wash: rgb(68 159 118 / 8%);
  }
}

[data-theme="dark"] {
  --ink: #e8edeb;
  --paper: #16202b;
  --surface: #1d2932;
  --slate: #3697c9;
  --brass: #d2a04e;
  --field: #449f76;
  --rule: #33404a;
  --muted: #9aa8b1;
  --alert: #d07565;

  --slate-wash: rgb(54 151 201 / 8%);
  --brass-wash: rgb(210 160 78 / 8%);
  --field-wash: rgb(68 159 118 / 8%);
}

[data-theme="light"] {
  --ink: #16202b;
  --paper: #f2f4f3;
  --surface: #ffffff;
  --slate: #1f5673;
  --brass: #916825;
  --field: #2e6b4f;
  --rule: #c9d1ce;
  --muted: #5c6b76;
  --alert: #8c3a2b;

  --slate-wash: rgb(31 86 115 / 8%);
  --brass-wash: rgb(145 104 37 / 8%);
  --field-wash: rgb(46 107 79 / 8%);
}