/* ============================================================
   RosterLift shared design tokens and page chrome.
   Loaded by the landing page and by every tool, so a tool only
   needs to ship what is genuinely its own.
   ============================================================ */
:root{
    /* This page is already dark. Without this, Chrome's Auto Dark Mode treats
       it as a light page and algorithmically inverts it - which turned the
       dark text on the tier chips and the gold "on the clock" pill white,
       overriding explicit author colours. Declaring the scheme opts out of
       that darkening, and makes native controls (select, checkbox,
       scrollbars) render dark-appropriate instead of light defaults. */
    color-scheme: dark;

    --bg:#0E1626; --panel:#141F35; --panel2:#182640; --line:#2A3A56;
    --text:#EAF0FA; --text-dim:#9FB0C8; --text-faint:#6A7C99;
    --gold:#F5C64B; --gold-ink:#4A3705;
    --green:#5FCB8B; --green-ink:#0E3A22;
    --blue:#5EB7EC; --blue-ink:#0C324A;
    --orange:#F0955C; --orange-ink:#4A2A0F;
    --gray:#98A2B3; --gray-ink:#242A34;
    --accent:#F5C64B;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1400px; margin:0 auto; padding:18px 20px 60px;}
  .brand{
    display:flex; align-items:baseline; gap:14px; margin-bottom:14px;
  }
  .brand h1{
    font-size:26px; letter-spacing:1px; margin:0; font-weight:800;
    font-stretch:condensed;
  }
  .brand h1 .lift{color:var(--accent);}
  .brand-tool{
    font-size:15px; font-weight:600; color:var(--text-dim);
    border-left:1px solid var(--line); padding-left:14px;
  }
  .brand-meta{color:var(--text-faint); font-size:13px;}
  .brand h1 a{color:inherit; text-decoration:none;}
  .brand h1 a:hover .lift{opacity:.8;}
  .brand-back{
    margin-left:auto; font-size:12px; color:var(--text-faint);
    text-decoration:none; border:1px solid var(--line); border-radius:6px;
    padding:5px 10px; white-space:nowrap;
  }
  .brand-back:hover{border-color:var(--accent); color:var(--text-dim);}