/* PygameOnline theme: the Python logo palette on deep blue surfaces.
 *
 *   Nature Blue   #4B8BBE   accents, links, focus, active items
 *   Philadelphia  #306998   secondary buttons, banners, selection
 *   Kournikova    #FFE873   hover state of primary buttons, highlights
 *   Bright Sun    #FFD43B   primary actions (Run, New project, Sign up)
 *   Storm Dust    #646464   control borders, disabled things, line numbers
 *
 * Storm Dust is too dark to read as text on the dark surfaces (about 3:1),
 * so muted text uses a lighter grey-blue instead.
 * Loaded by every page before editor.css or site.css.
 */
:root {
    /* The five Python logo colours */
    --py-blue: #4b8bbe;
    --py-blue-dark: #306998;
    --py-yellow-light: #ffe873;
    --py-yellow: #ffd43b;
    --py-grey: #646464;

    /* Surfaces, darkest last (tints of Philadelphia blue) */
    --bg: #13263a;
    --panel: #0f1f30;
    --panel-2: #0a1622;
    --raised: #1c3550;       /* buttons, hover rows */
    --border: #24405c;       /* panel dividers */
    --control-border: var(--py-grey);

    /* Text */
    --text: #e9eff5;
    --muted: #a3b3c4;
    --on-yellow: #14222f;    /* text on Bright Sun buttons */

    /* Roles */
    --accent: var(--py-blue);
    --link: #78afdc;         /* Nature Blue, lightened for small text */
    --primary: var(--py-yellow);
    --primary-hover: var(--py-yellow-light);
    --secondary: var(--py-blue-dark);
    --secondary-hover: var(--py-blue);

    /* Status colours stay conventional so meaning is obvious */
    --ok: #8fd694;
    --warn: var(--py-yellow-light);
    --error: #ff8f8f;
    --danger: #b3364f;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }
a { color: var(--link); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--py-yellow); outline-offset: 2px; }
::selection { background: rgba(75, 139, 190, .55); }
[hidden] { display: none !important; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Brand ------------------------------------------------------------------ */
.brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; text-decoration: none; letter-spacing: .01em;
}
/* Two overlapping rounded squares in the logo colours (not the Python logo itself). */
.brand-mark {
    position: relative; width: 22px; height: 22px; flex: none;
}
.brand-mark::before, .brand-mark::after {
    content: ""; position: absolute; width: 14px; height: 14px; border-radius: 4px;
}
.brand-mark::before { left: 0; top: 0; background: var(--py-blue); }
.brand-mark::after { right: 0; bottom: 0; background: var(--py-yellow); box-shadow: -2px -2px 0 var(--panel); }
.brand-py { color: var(--py-blue); }
.brand-online { color: var(--py-yellow); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-block; background: var(--raised); color: var(--text);
    border: 1px solid var(--control-border); border-radius: 6px;
    padding: 6px 14px; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.btn:hover:not(:disabled) { background: #26476a; border-color: var(--py-blue); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary {
    background: var(--primary); color: var(--on-yellow); border-color: var(--primary); font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-yellow); }
.btn-accent { background: var(--secondary); color: #fff; border-color: var(--secondary); font-weight: 600; }
.btn-accent:hover:not(:disabled) { background: var(--secondary-hover); border-color: var(--secondary-hover); }
.btn-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }