/*
 * Pico variable bridge — issue #475 (v2 DS plan §U3).
 *
 * Maps Pico's `--pico-*` defaults onto Lucian's design-system tokens
 * (`--color-*`, `--font-*` from `tokens.css`). Loads AFTER Pico in
 * Propshaft's `:app` glob — invariant pinned by
 * `test/integration/css_load_order_test.rb` (see issue #472).
 *
 * Coordination:
 *   - `--pico-h1-color`…`--pico-h6-color` are owned by `zz-theme.css`
 *     (loads after this file). Do NOT redeclare them here.
 *   - `--color-role-*` tokens are scoped to
 *     `organisms/members-panel.css` (CLAUDE.md §2 / issue #479). Do
 *     NOT reference them here.
 *
 * Test contract: `test/integration/pico_bridge_test.rb`.
 *
 * Do NOT remove the `zz-` prefix and do NOT move this file into a
 * subdirectory. Both changes break the load-order invariant pinned
 * by `test/integration/css_load_order_test.rb`.
 */

/* Neutralize Pico's `prefers-color-scheme: dark` media query
   (`vendor/pico.sand.css` line 359). Must be unconditional — applying
   it under `:root:not([data-theme=dark])` would still let the OS
   dark-mode preference flip the cascade. */
:root {
  color-scheme: light;
}

/* Lock root font-size so rem-based tokens keep their documented px values.
   Pico's responsive breakpoints scale --pico-font-size from 100% to 131.25%
   across viewports (vendor/pico.sand.css lines 49-78), inflating 1rem above
   16px. All --sp-* and --fs-* token comments (tokens.css) assume 1rem = 16px.
   Pico applies the scaling via `:where(:root)` (specificity 0,0,0); bare
   `:root` here (specificity 0,0,1) wins unconditionally. */
:root {
  font-size: 100%;
}

:root:not([data-theme=dark]) {
  /* Background and surfaces */
  --pico-background-color:                 var(--color-bg);
  --pico-card-background-color:            var(--color-paper);
  --pico-card-sectioning-background-color: var(--color-bg);
  --pico-dropdown-background-color:        var(--color-paper);
  --pico-dropdown-hover-background-color:  var(--color-surface);

  /* Text (h1-h6 colors are owned by zz-theme.css) */
  --pico-color:           var(--color-ink);
  --pico-muted-color:     var(--color-ink-muted);
  --pico-mark-color:      var(--color-ink);
  --pico-code-color:      var(--color-ink-muted);
  --pico-del-color:       var(--color-danger);
  --pico-ins-color:       var(--color-success);

  /* Borders */
  --pico-muted-border-color:    var(--color-rule);
  --pico-card-border-color:     var(--color-rule);
  --pico-dropdown-border-color: var(--color-rule);

  /* Primary */
  --pico-primary:                  var(--color-primary);
  --pico-primary-background:       var(--color-primary);
  --pico-primary-hover:            var(--color-primary-hover);
  --pico-primary-hover-background: var(--color-primary-hover);
  --pico-primary-inverse:          var(--color-ink-onfill);

  /* Secondary */
  --pico-secondary:                  var(--color-ink-muted);
  --pico-secondary-background:       var(--color-ink-muted);
  --pico-secondary-hover:            var(--color-ink);
  --pico-secondary-hover-background: var(--color-ink);

  /* Form elements */
  --pico-form-element-background-color:        var(--color-paper);
  --pico-form-element-border-color:            var(--color-rule-strong);
  --pico-form-element-color:                   var(--color-ink);
  --pico-form-element-placeholder-color:       var(--color-ink-subtle);
  --pico-form-element-active-background-color: var(--color-paper);
  --pico-form-element-focus-color:             var(--color-focus-ring);

  /* Typography */
  --pico-font-family-sans-serif: var(--font-sans);
  --pico-font-family-serif:      var(--font-serif);
  --pico-font-family-monospace:  var(--font-mono);
  --pico-font-family:            var(--font-sans);
}

/* Heading family — paired with the heading-color overrides in
   `zz-theme.css`. Wins by source order over Pico's sans-serif default.
   Color is intentionally NOT set here; `zz-theme.css` declares
   `--pico-h{1..6}-color` and Pico applies them via its own selectors. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
}