/* tokens-bridge.css — semantic unification seam
 * -------------------------------------------------------------------------
 * Bridges legacy token systems (team-pages, mockup, Daily) under a single
 * set of semantic tokens so components can opt in to one light vocabulary.
 *
 * 538/Pudding light migration (2026-06-16, Phase 2):
 *   - LIGHT IS THE DEFAULT. The :root base now resolves to the doc-90 538
 *     neutrals; dark is no longer the fallback.
 *   - Surfaces may still override via their own --bg-0 / --background /
 *     --navy (incremental opt-in chain preserved), but the hard fallbacks
 *     are now 538 light, not dark.
 *   - The [data-theme="dark"] block has been deleted (Phase 8, 2026-06-18).
 *
 * Pre-flip gate (H3): grep confirmed ZERO production consumers of
 * --semantic-* (the only reads are in docs/mockups/theme_toggle_demo.html).
 * Flipping these values is therefore safe and preparatory.
 *
 * How it works:
 *   - Semantic tokens resolve via a chain of var() fallbacks: if a surface
 *     defines --bg-0 / --background / --navy, use it; else fall back to the
 *     538 light value.
 *   - Components read --semantic-* and inherit the right value for whichever
 *     surface they render on.
 */

:root {
  /* ---- Surface ramp (538 light defaults) ---- */
  --semantic-bg-base: var(
    --bg-0,
    var(--background,
      var(--navy, #ffffff)
    )
  );
  --semantic-bg-elevated: var(
    --bg-1,
    var(--card,
      var(--cream, #ffffff)
    )
  );
  --semantic-bg-card: var(
    --bg-card,
    var(--popover,
      var(--cream, #ffffff)
    )
  );
  --semantic-bg-raised: var(
    --bg-card-raised,
    var(--card,
      var(--cream, #f0f0f0)        /* 538 chart-panel fill */
    )
  );

  /* ---- Foreground ramp (538 ink) ---- */
  --semantic-fg-primary: var(
    --fg-primary,
    var(--foreground,
      var(--ink, #222222)
    )
  );
  --semantic-fg-secondary: var(
    --fg-secondary,
    var(--muted-foreground,
      var(--ink, #5b5b5b)
    )
  );
  --semantic-fg-muted: var(
    --fg-muted,
    var(--muted-foreground,
      var(--ink, #8b8b8b)
    )
  );

  /* ---- Lines + borders (538 neutrals) ---- */
  --semantic-line: var(
    --stroke-default,
    var(--border,
      #e4e4e1
    )
  );
  --semantic-line-strong: var(
    --stroke-strong,
    var(--border-strong,
      #d7d7d4
    )
  );
  /* Card border: white-on-white needs an explicit hairline (doc 90 §2.7). */
  --semantic-card-border: var(--stroke-default, var(--border, #e4e4e1));

  /* ---- Accent (per-team-overridable) ---- */
  --semantic-accent: var(
    --accent-primary,
    var(--gold, #c5b358)
  );
  /* Text on an accent fill defaults to ink, not white (doc 90 Appendix B/C). */
  --semantic-accent-fg: var(
    --accent-on,
    #222222
  );

  /* ---- Typography (doc 90 canonical) ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-display-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Fraunces', Georgia, serif;
  --font-sans: 'Archivo', 'Inter', -apple-system, system-ui, sans-serif;
  --font-numeral: 'Archivo', 'Inter', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------
 * Light is already the :root default above. This block is retained so
 * that surfaces which define their own dark --bg-0 (e.g. team pages
 * pre-Phase-3) are still forced light for users who explicitly prefer
 * light. Values match the 538 base. Wrapped in :where() = zero
 * specificity, so any [data-theme] attribute still wins.
 * --------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :where(:root) {
    --semantic-bg-base: #ffffff;
    --semantic-bg-elevated: #ffffff;
    --semantic-bg-card: #ffffff;
    --semantic-bg-raised: #f0f0f0;
    --semantic-fg-primary: #222222;
    --semantic-fg-secondary: #5b5b5b;
    --semantic-fg-muted: #8b8b8b;
    --semantic-line: #e4e4e1;
    --semantic-line-strong: #d7d7d4;
    --semantic-card-border: #e4e4e1;
  }
}

/* User-preference override:
 *   <html data-theme="light"> forces 538 light regardless of OS preference.
 *   Set by theme/assets/theme_toggle.js (+ FOUC-prevention theme_init.js). */

:root[data-theme="light"] {
  --semantic-bg-base: #ffffff;
  --semantic-bg-elevated: #ffffff;
  --semantic-bg-card: #ffffff;
  --semantic-bg-raised: #f0f0f0;
  --semantic-fg-primary: #222222;
  --semantic-fg-secondary: #5b5b5b;
  --semantic-fg-muted: #8b8b8b;
  --semantic-line: #e4e4e1;
  --semantic-line-strong: #d7d7d4;
  --semantic-card-border: #e4e4e1;
}