/* ============================================================================
   tokens.css -- the ONE visual system.
   Spec: docs/superpowers/specs/2026-09-18-consistent-experience-design.md section 6, D-10.
   The 19 names and values are docs/parent_dashboard_mockups.html's :root block, unchanged.
   docs/consistent_experience_mockups.html (boards C-1 ... C-14) and
   docs/consistent_experience_flows.html (F-1.1 ... F-4.12) apply them to every screen.

   LINK IT FIRST. On every shell this is the first static_hash('css/...') link, before any
   sheet that declares its own :root. That order is the adoption strategy, not an accident:
   three of these names already mean something else in sheets that load later --
     --ink   test_page.css:10, main_auth.css:3, test_dashboard.css:4, test_auth.css:3,
             templates/study/_base.html:16, templates/student_hub.html:18
     --brand a COLOUR (not a font stack) in test_page.css:14, main_auth.css:4,
             test_auth.css:4, templates/study/_base.html:17, templates/student_hub.html:19
     --warn  test_page.css:16
   Linked first, those pages keep their own value and nothing repaints until its own task
   migrates it. Adoption is progressive (spec section 6), not a big bang.

   .qv-tokens re-establishes the standard inside a subtree. Custom properties resolve per
   element against the NEAREST ancestor that declares them, which beats any page-level :root
   whatever the link order. The chrome (templates/navbar_v5.html) and the parent page's two
   mode containers (templates/parent_wizard.html) carry it. Never put it on <body>: on the
   tournament pages test_page.css's 32 var(--brand) colour declarations would receive a font
   stack, and its body rule reads var(--ink).

   Contrast, measured (AA: 4.5:1 normal text, 3:1 non-text and large text):
     --ink on --paper 12.61:1   --ink on --tint 11.09:1    --ink2 on --paper 6.71:1
     --action on --paper 6.35:1 white on --action 6.35:1   --action-deep on --tint 7.50:1
     --warn on --warn-tint 5.01:1
   Known shortfalls. Do not use these for normal-size text:
     --ink3 on --paper 3.60:1   -> hints and small print only, never essential copy
     white on --go 4.34:1       -> a success BUTTON uses --action (6.35:1)
     --go on --go-tint 3.86:1   -> --go is for borders, ticks and large numerals
     --vidya on --paper 3.05:1  -> the wordmark (an exempt logotype), a border, a background
   ============================================================================ */

:root, .qv-tokens{
  /* surfaces */
  --ground:#e4e9f1; --page:#f5f7fb; --paper:#ffffff;
  /* text */
  --ink:#1f3450; --ink2:#4a5d78; --ink3:#7a889c;
  /* borders */
  --rule:#e1e7f0; --rule2:#cdd6e3;
  /* action */
  --action:#2f5fa6; --action-deep:#244c88; --tint:#eaf1fb;
  /* the wordmark coral */
  --vidya:#e86e6c;
  /* success */
  --go:#1e8a5a; --go-tint:#e7f5ed;
  /* caution */
  --warn:#8f5d12; --warn-tint:#fcf1db;
  /* the navigation bar */
  --nav:#2c3e50;
  /* type */
  --sans:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --brand:'Fredoka One','Poppins',ui-rounded,system-ui,sans-serif;
}

/* One visible focus ring for the whole system; every board C-1 ... C-14 carries it.
   --action-deep is 8.52:1 on --paper and 7.95:1 on --page. Scoped to .qv-tokens subtrees
   so adopting a surface opts it in, rather than repainting focus everywhere at once. */
.qv-tokens a:focus-visible,
.qv-tokens button:focus-visible,
.qv-tokens input:focus-visible,
.qv-tokens select:focus-visible,
.qv-tokens textarea:focus-visible,
.qv-tokens [tabindex]:focus-visible{
  outline:3px solid var(--action-deep);
  outline-offset:2px;
}

/* Reduced motion, for the subtrees that have adopted the system. */
@media (prefers-reduced-motion:reduce){
  .qv-tokens *,
  .qv-tokens *::before,
  .qv-tokens *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}