/* PrintWizzard — Design Tokens
 * Direction B (Print Bureau) — picked v2.44.4
 *
 * Three-layer architecture per the ui-ux-pro-max design-system skill:
 *   1. PRIMITIVE — raw color / type / spacing values
 *   2. SEMANTIC  — purpose aliases (--pw-primary, --pw-text, etc.)
 *   3. COMPONENT — per-component tokens. Filled in during Phase 2.
 *
 * Convention: every token prefixed `--pw-` so cohabitation with the
 * legacy `style.css` (which defines `--bg`, `--text`, etc.) doesn't
 * collide. Phase 3+4 templates migrate to `--pw-*` one at a time;
 * Phase 5 deletes the legacy aliases.
 *
 * Loaded BEFORE `style.css` in every base template so the legacy
 * rules (which use `:root { --text: #1f2328 }` etc.) cascade-win
 * for any old templates that still reference them.
 */

:root {
  /* v2.51.0 — explicit light by default. Dark theme picks up via
     `:root[data-theme="dark"]` (user-toggled) or the OS-tracking
     auto rule below. The previous `color-scheme: light dark` made
     every native form control + scrollbar follow the OS even when
     our page-level CSS stayed light → unreadable. Form-control
     theming now matches whichever theme actually applies. */
  color-scheme: light;

  /* ════════════════════════════════════════════════════════════════
     LAYER 1 — PRIMITIVES
     ════════════════════════════════════════════════════════════════ */

  /* Paper + ink ramp (warm-leaning neutrals). The light end is
     paper-white, the dark end is ink. Mid-tones drift slightly cool
     so they sit clean next to the printer's-blue primary. */
  --pw-paper-50:  #FCFCF8;
  --pw-paper-100: #F5F5EE;
  --pw-paper-200: #E8E5D8;
  --pw-paper-300: #D8D4C8;
  --pw-paper-400: #B4B2A6;
  --pw-paper-500: #9EA1A8;
  --pw-paper-600: #6A6E78;
  --pw-paper-700: #4A4F5C;
  --pw-paper-800: #2A2D38;
  --pw-paper-900: #161B2A;
  --pw-ink:       #0E1014;
  --pw-ink-dark:  #0A0D14;

  /* Printer's blue — the disciplined accent. 600 is the brand
     primary; 300 is the dark-mode lift; 700 is the active state. */
  --pw-blue-100: #E8EEF8;
  --pw-blue-300: #6088C8;
  --pw-blue-500: #3B5F9B;
  --pw-blue-600: #1B3A6F;
  --pw-blue-700: #142A52;

  /* Vermillion — used sparingly. The brand mark's accent dot is the
     primary use case; semantic UI usage is the danger state. */
  --pw-vermillion-300: #D8625A;
  --pw-vermillion-500: #B33A3A;
  --pw-vermillion-600: #9B2A2A;

  /* Semantic state ramps — light + dark pair each. */
  --pw-good-500: #1F5B3A;
  --pw-good-300: #3F9560;
  --pw-warn-500: #8F6A11;
  --pw-warn-300: #D4A833;
  --pw-bad-500:  #A8261A;
  --pw-bad-300:  #D14F40;

  /* Typography. EB Garamond for display only; IBM Plex Sans for UI;
     IBM Plex Mono for code / monospace. The Google Fonts CSS link is
     added in `_base.html` (Phase 2). Each stack ends with a
     reasonable system fallback so the page reads cleanly even if
     the network fetch is slow. */
  --pw-font-display: 'EB Garamond', Garamond, 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --pw-font-ui:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pw-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* v2.51.19 — Condensed UI variant for editorial kickers + bylines.
     Falls back to the main UI face when Condensed isn't loaded. */
  --pw-font-cond:    'IBM Plex Sans Condensed', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale. xs..3xl mostly for app chrome; the kiosk + dashboard
     surfaces overshoot this scale with explicit pixel values in
     their own CSS where the deliberately-huge KPI numbers live. */
  --pw-text-xs:   11px;
  --pw-text-sm:   13px;
  --pw-text-base: 15px;
  --pw-text-md:   17px;
  --pw-text-lg:   20px;
  --pw-text-xl:   26px;
  --pw-text-2xl:  34px;
  --pw-text-3xl:  48px;
  --pw-line-tight: 1.15;
  --pw-line-base:  1.45;
  --pw-line-loose: 1.6;

  /* Spacing scale — 4-pt grid. Even multiples up through 12 cover
     every layout case we have today; Phase 2 components clamp their
     padding / gap values to these tokens. */
  --pw-space-1:   4px;
  --pw-space-2:   8px;
  --pw-space-3:   12px;
  --pw-space-4:   16px;
  --pw-space-5:   20px;
  --pw-space-6:   24px;
  --pw-space-8:   32px;
  --pw-space-10:  40px;
  --pw-space-12:  48px;
  --pw-space-16:  64px;

  /* Radius. Pill = always-round; lg for cards; md for buttons; sm
     for inputs + small chrome. */
  --pw-radius-sm:   4px;
  --pw-radius-md:   6px;
  --pw-radius-lg:   10px;
  --pw-radius-xl:   16px;
  --pw-radius-pill: 999px;

  /* Shadows — light mode (subtle, paper-on-paper). Dark mode
     overrides below. */
  --pw-shadow-sm: 0 1px 2px rgba(14, 16, 20, 0.06);
  --pw-shadow-md: 0 4px 8px rgba(14, 16, 20, 0.08);
  --pw-shadow-lg: 0 12px 24px rgba(14, 16, 20, 0.12);

  /* Motion */
  --pw-duration-fast: 120ms;
  --pw-duration-base: 220ms;
  --pw-duration-slow: 360ms;
  --pw-easing-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --pw-easing-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ════════════════════════════════════════════════════════════════
     LAYER 2 — SEMANTIC
     Light mode defaults. `prefers-color-scheme: dark` overrides
     below. Component CSS in Phase 2 references the semantic
     names only — never primitive ramps directly — so dark-mode
     parity is automatic.
     ════════════════════════════════════════════════════════════════ */

  /* Surfaces + text */
  --pw-bg:           var(--pw-paper-50);
  --pw-surface:      #FFFFFF;
  --pw-surface-2:    var(--pw-paper-100);
  --pw-surface-3:    var(--pw-paper-200);
  --pw-text:         var(--pw-ink);
  --pw-text-muted:   var(--pw-paper-700);
  /* v2.51.21 — text-faint bumped from paper-500 (#9EA1A8, 2.5:1 on
     white) to paper-600 (#6A6E78, ~5.5:1) so faint labels are
     legible. paper-500 stays as the BORDER token color; only text
     uses moved up to paper-600. */
  --pw-text-faint:   var(--pw-paper-600);
  --pw-border:       var(--pw-paper-300);
  --pw-border-strong: var(--pw-paper-500);

  /* Primary (printer's blue) */
  --pw-primary:        var(--pw-blue-600);
  --pw-primary-hover:  var(--pw-blue-500);
  --pw-primary-active: var(--pw-blue-700);
  --pw-primary-on:     #FFFFFF;
  --pw-primary-soft:   var(--pw-blue-100);

  /* Accent (vermillion) — disciplined, used as a brand mark dot or
     a destructive-action affirmation. Not the same as danger. */
  --pw-accent:         var(--pw-vermillion-500);
  --pw-accent-hover:   var(--pw-vermillion-600);
  --pw-accent-on:      #FFFFFF;

  /* Semantic states */
  --pw-success:        var(--pw-good-500);
  --pw-success-on:     #FFFFFF;
  --pw-warning:        var(--pw-warn-500);
  --pw-warning-on:     #FFFFFF;
  --pw-danger:         var(--pw-bad-500);
  --pw-danger-on:      #FFFFFF;

  /* Focus ring — at the design-token level so every Phase-2
     component picks it up without bespoke styling. */
  --pw-focus-ring:        0 0 0 3px rgba(27, 58, 111, 0.45);
  --pw-focus-ring-on-dark: 0 0 0 3px rgba(96, 136, 200, 0.55);

  /* ════════════════════════════════════════════════════════════════
     LAYER 2b — EDITORIAL (v2.51.0)
     Tokens for the "Print Bureau" editorial polish — magazine
     bylines, hairline rules, asymmetric gutters, prose measure
     for long-form text, drop-cap sizing. Consumed by
     `.pw-prose`, `.pw-heading--display`, `.pw-byline`, `.pw-rule`
     and the editorial layouts on dashboard / job_detail /
     qa_order / brand_preview.
     ════════════════════════════════════════════════════════════════ */
  --pw-font-display-italic: italic 600 var(--pw-text-2xl)/var(--pw-line-tight) var(--pw-font-display);
  --pw-prose-measure:        62ch;
  --pw-prose-leading:        1.55;
  --pw-asymmetric-gutter:    clamp(24px, 5vw, 96px);
  --pw-rule:                 1px solid var(--pw-border);
  --pw-dropcap-size:         5.4em;
  --pw-byline-letter-spacing: 0.18em;
  --pw-byline-size:          var(--pw-text-xs);
}

/* ──────────────────────────────────────────────────────────────────
   v2.51.0 — Explicit dark mode + OS-auto support
   ──────────────────────────────────────────────────────────────────
   The user picks light / dark / auto via the header toggle
   (`.pw-theme-toggle`); the choice is persisted in the `pw_theme`
   cookie and rendered as `<html data-theme="…">` on every page
   server-side (no FOUC).

   The same semantic overrides apply in two cases:
     1) Explicit dark pick — `:root[data-theme="dark"]`
     2) Auto pick + OS reports dark — gated by media query +
        `:root[data-theme="auto"]`
   CSS doesn't let us share a body between selectors so the
   overrides are duplicated. Keep the two blocks IN LOCKSTEP.

   Primitives (paper / ink ramps) stay the same so the ramps are
   still queryable from either theme — only the semantic aliases
   shift. The `--pw-success-on` / `--pw-warning-on` / `--pw-danger-on`
   foreground colors flip too, which v2.50 missed — that was why
   QA status pills looked chalky on dark.
   ────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --pw-bg:            var(--pw-ink-dark);
  --pw-surface:       var(--pw-paper-900);
  --pw-surface-2:     var(--pw-paper-800);
  --pw-surface-3:     var(--pw-paper-700);
  --pw-text:          var(--pw-paper-50);
  --pw-text-muted:    var(--pw-paper-300);
  --pw-text-faint:    var(--pw-paper-500);
  --pw-border:        rgba(255, 255, 255, 0.08);
  --pw-border-strong: rgba(255, 255, 255, 0.18);

  --pw-primary:        var(--pw-blue-300);
  --pw-primary-hover:  var(--pw-blue-500);
  --pw-primary-active: var(--pw-blue-300);
  --pw-primary-on:     var(--pw-ink-dark);
  --pw-primary-soft:   rgba(96, 136, 200, 0.18);

  --pw-accent:         var(--pw-vermillion-300);
  --pw-accent-hover:   var(--pw-vermillion-500);
  --pw-accent-on:      var(--pw-ink-dark);

  --pw-success:        var(--pw-good-300);
  --pw-success-on:     var(--pw-ink-dark);
  --pw-warning:        var(--pw-warn-300);
  --pw-warning-on:     var(--pw-ink-dark);
  --pw-danger:         var(--pw-bad-300);
  --pw-danger-on:      var(--pw-ink-dark);

  --pw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --pw-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
  --pw-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.7);

  --pw-rule:          1px solid var(--pw-border);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;

    --pw-bg:            var(--pw-ink-dark);
    --pw-surface:       var(--pw-paper-900);
    --pw-surface-2:     var(--pw-paper-800);
    --pw-surface-3:     var(--pw-paper-700);
    --pw-text:          var(--pw-paper-50);
    --pw-text-muted:    var(--pw-paper-300);
    --pw-text-faint:    var(--pw-paper-500);
    --pw-border:        rgba(255, 255, 255, 0.08);
    --pw-border-strong: rgba(255, 255, 255, 0.18);

    --pw-primary:        var(--pw-blue-300);
    --pw-primary-hover:  var(--pw-blue-500);
    --pw-primary-active: var(--pw-blue-300);
    --pw-primary-on:     var(--pw-ink-dark);
    --pw-primary-soft:   rgba(96, 136, 200, 0.18);

    --pw-accent:         var(--pw-vermillion-300);
    --pw-accent-hover:   var(--pw-vermillion-500);
    --pw-accent-on:      var(--pw-ink-dark);

    --pw-success:        var(--pw-good-300);
    --pw-success-on:     var(--pw-ink-dark);
    --pw-warning:        var(--pw-warn-300);
    --pw-warning-on:     var(--pw-ink-dark);
    --pw-danger:         var(--pw-bad-300);
    --pw-danger-on:      var(--pw-ink-dark);

    --pw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --pw-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    --pw-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.7);

    --pw-rule:          1px solid var(--pw-border);
  }
}

/* ──────────────────────────────────────────────────────────────────
   `prefers-reduced-motion` — global motion kill switch. Components
   should always honor this rather than re-implementing per
   component. Phase 2 component CSS adds the same guard to its own
   transition declarations.
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pw-duration-fast: 0ms;
    --pw-duration-base: 0ms;
    --pw-duration-slow: 0ms;
  }
}