/* site tokens — pages override values in their own :root.
   url()s are relative to this file, so they resolve from any page. */

/* skip-link: hidden off-screen, slides in as a kawaii pill on keyboard focus.
   Shared by every page that loads _tokens.css. Restyled (not removed) because
   removing it regresses WCAG 2.4.1 Bypass Blocks (Level A). Off-screen until
   :focus keeps it invisible to mouse users while staying first-tab-reachable. */
#skip {
    position: absolute;
    top: -120px;                 /* off-screen until focused */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--content-bg);
    color: var(--text);
    border: 2px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 18px;
    font-family: var(--font-head);
    font-weight: bold;
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--border-color);
    transition: top 0.15s ease;
}
#skip:focus {
    top: 8px;
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

:root {
    --bg: #beaafd;
    --bg-image: url("../img/ui/bg/pastelstarz.gif");
    --content-bg: #d4c7ff;

    --text: #471684;
    --accent: #5e2d9e;        /* was #764bb6 (3.89:1 on content-bg, failed AA). #5e2d9e = 5.72:1, AA normal */
    --accent-hover: #4d2188;  /* was #9677ec (2.18:1, failed). Darken on hover for contrast: 7.10:1 */

    /* color only — each rule sets its own width/style so pages can
       change border weight without forking the token */
    --border-color: #f777aa;

    --font-main: "Concert One", sans-serif;
    --font-head: "Concert One", sans-serif;

    --radius: 0;
    --gap: 10px;
    --pad: 20px;
    --sidebar-w: 200px;
}