/* ===== codeart — sketchbook style: tokens & primitives =====
   Swapped in for css/base.css when the sketchbook style is on (js/look.js).
   The same visual language as vaibhav.co.uk (src/styles/tokens.css there):
   a manga / cel-shaded sketchbook. Four colours (cream paper, ink, neon,
   highlighter), 2.5px ink strokes, hard offset shadows that are never
   blurred, mono lowercase pill buttons, comic panels with neon corner
   brackets. Fonts come from css/fonts.css. */
:root {
    color-scheme: light;
    --paper: #f3ecdd;          /* cream paper background */
    --paper-2: #ebe2cd;        /* slightly darker cream */
    --paper-3: #e2d6bc;        /* wells, tracks, inactive fills */
    --ink: #111111;            /* manga ink */
    --ink-soft: #2a2a2a;
    --neon: #ff2e63;           /* sakura / neon accent */
    --neon-soft: #ffe5ec;
    --hi: #ffd84d;             /* highlighter yellow (sparingly) */
    --hi-soft: rgba(255, 216, 77, 0.45);
    --on-colour: #111111;      /* text on neon/hi/data fills stays ink in both themes */

    --text: var(--ink);
    --text-muted: #6a6358;
    --rule: rgba(17, 17, 17, 0.16);   /* hairlines inside a panel */
    --rule-2: rgba(17, 17, 17, 0.34);
    --dots: rgba(17, 17, 17, 0.07);   /* paper texture */

    --b: 2.5px;                /* base ink stroke */
    --b-thin: 1.5px;
    --r: 14px;                 /* panel radius */
    --r-sm: 8px;
    --shadow: 6px 6px 0 0 var(--ink);
    --shadow-sm: 3px 3px 0 0 var(--ink);
    --shadow-lift: 9px 9px 0 0 var(--ink);
    --shadow-neon: 5px 5px 0 0 var(--neon);

    --font-display: 'Bungee', 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* data types: the same accents vaibhav.co.uk uses for its project cards */
    --t-int: #4f7cff;
    --t-float: #22d3ee;
    --t-str: #ffd84d;
    --t-bool: #3fae5a;
    --t-none: #cfc6b2;
    --t-ref: #d8ccb2;
    --t-fn: #c084fc;

    --ok: #2f9e55;
    --ok-soft: rgba(63, 174, 90, 0.18);
    --bad: #e0244f;
    --bad-soft: rgba(255, 46, 99, 0.14);

    /* syntax */
    --tk-kw: #d0174a;
    --tk-str: #9a6400;
    --tk-num: #2f5fd0;
    --tk-com: #9b937f;
    --tk-def: #147a6c;
    --tk-bi: #7c3aed;
    --tk-op: #6a6358;

    --z-header: 150;
    --z-overlay: 200;

    /* ---- css/base.css names, so app.css and panels.css read these tokens ---- */
    --bg: var(--paper);
    --surface: var(--paper);
    --surface-2: var(--paper-2);
    --surface-3: var(--paper-3);
    --line: var(--rule);
    --line-2: var(--rule-2);
    --text-2: var(--ink-soft);
    --muted: var(--text-muted);
    --accent: var(--neon);
    --accent-ink: #ffffff;
    --accent-soft: var(--neon-soft);
    --cool: var(--ink);
    --cool-soft: var(--hi-soft);
    --teal: #147a6c;
    --glass: var(--paper);
    --shadow-lg: var(--shadow);
    --font: var(--font-body);
    --mono: var(--font-mono);
    --r-lg: var(--r);
}

/* night: vaibhav.co.uk's [data-theme='night'] — the paper goes dark and the
   ink turns cream; neon and highlighter stay put. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #131311;
    --paper-2: #0b0b0a;
    --paper-3: #22211d;
    --ink: #f3ecdd;
    --ink-soft: #d8d0bd;
    --neon-soft: rgba(255, 46, 99, 0.16);
    --text-muted: #9b937f;
    --rule: rgba(243, 236, 221, 0.16);
    --rule-2: rgba(243, 236, 221, 0.34);
    --dots: rgba(243, 236, 221, 0.06);
    --t-none: #8a8270;
    --t-ref: #3a372f;
    --ok: #57c97b;
    --bad: #ff5c80;
    --tk-kw: #ff6f93;
    --tk-str: #ffd84d;
    --tk-num: #8fb0ff;
    --tk-com: #7d7666;
    --tk-def: #5fe0c9;
    --tk-bi: #c9a3ff;
    --tk-op: #9b937f;
    --teal: #5fe0c9;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--paper);
    /* paper texture: a faint dotted grid over a top-to-bottom cream fade */
    background-image:
        radial-gradient(var(--dots) 1px, transparent 1.2px),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    background-size: 22px 22px, 100% 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--ink); transition: color 0.2s ease; }
a:hover { color: var(--neon); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
code, kbd, pre { font-family: var(--font-mono); }
::selection { background: var(--neon); color: #fff; }
:focus-visible { outline: var(--b) solid var(--neon); outline-offset: 3px; }
[hidden] { display: none !important; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; line-height: 1; }

/* ---- wordmark: four inked blocks + name ---- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-glyph { position: relative; width: 22px; height: 22px; flex: none; }
.logo-glyph i { position: absolute; width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 3px; }
.logo-glyph i:nth-child(1) { left: 0; top: 0; background: var(--t-int); }
.logo-glyph i:nth-child(2) { right: 0; top: 0; background: var(--hi); }
.logo-glyph i:nth-child(3) { left: 0; bottom: 0; background: var(--paper); }
.logo-glyph i:nth-child(4) { right: 0; bottom: 0; background: var(--neon); transform: translate(2px, 2px); }
.logo b { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: 0.02em; }
.logo span { color: var(--text-muted); }

/* ---- buttons: mono, lowercase, ink pills with hard shadows ----
   .btn            ghost pill: paper fill, ink stroke (vaibhav .btnGhost)
   .btn.primary    ink pill that turns neon on hover (vaibhav .btnInk)
   .btn.ghost      no chrome until hovered
   .btn.lg         the hero size, with the full 6px shadow */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 34px;
    padding: 0 1rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: lowercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    border: var(--b) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) { color: var(--paper); background: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--shadow-neon); }
.btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--ink); }
.btn.primary { color: var(--paper); background: var(--ink); }
.btn.primary:hover:not(:disabled) { color: #fff; background: var(--neon); box-shadow: 5px 5px 0 0 var(--ink); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover:not(:disabled) { color: var(--ink); background: var(--paper-2); border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translate(-1px, -1px); }
.btn.lg { height: auto; padding: 0.9rem 1.5rem; font-size: 0.9rem; gap: 0.6rem; box-shadow: var(--shadow); }
.btn.lg:hover:not(:disabled) { transform: translate(-3px, -3px); box-shadow: var(--shadow-lift); }
.btn.lg:not(.primary):hover:not(:disabled) { box-shadow: 9px 9px 0 0 var(--neon); }
.btn kbd { font-size: 0.68rem; opacity: 0.65; }

.icon-btn {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    border: var(--b) solid transparent;
    background: transparent;
    color: var(--ink);
    transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.icon-btn:hover:not(:disabled) { color: var(--paper); background: var(--ink); border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 0 var(--neon); }
.icon-btn.on { color: var(--on-colour); background: var(--hi); border-color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---- chips, tags, difficulty, tiers ---- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 0.7rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.7rem; text-transform: lowercase; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.chip:is(a, button):hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.chip.active { color: var(--paper); background: var(--ink); box-shadow: 3px 3px 0 0 var(--neon); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.2rem 0.5rem; color: var(--paper); background: var(--ink); border-radius: 4px; white-space: nowrap; }
.tag.neon { color: #fff; background: var(--neon); }
.diff { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.22rem 0.5rem; border: 2px solid var(--ink); border-radius: 4px; white-space: nowrap; color: var(--on-colour); }
.diff.intro { color: var(--ink); background: var(--paper); }
.diff.easy { background: #bfe8c9; }
.diff.medium { background: var(--hi); }
.diff.hard { color: #fff; background: var(--neon); }
.tier { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; line-height: 1.2; text-transform: lowercase; padding: 0.25rem 0.6rem; border: 2px solid var(--ink); border-radius: 999px; white-space: nowrap; color: var(--on-colour); }
.tier.optimal { background: var(--hi); box-shadow: 2px 2px 0 0 var(--ink); }
.tier.time { background: #cfdcff; }
.tier.space { background: #c8f3ec; }
.tier.alt { color: var(--ink); background: var(--paper); }
.tier.brute { color: #fff; background: var(--neon); }

/* ---- comic panel ----
   An inked card with a hard shadow. On hover it lifts, the shadow turns
   neon and four L-shaped corner brackets appear (vaibhav.co.uk Panel). The
   brackets are drawn by ::after, so no extra markup is needed; add
   .bracketed to show them all the time, or .still to turn off the lift. */
.ink-panel {
    position: relative;
    background: var(--paper);
    border: var(--b) solid var(--ink);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ink-panel::after {
    --l: 18px;
    content: '';
    position: absolute;
    inset: calc(-8px - var(--b));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    background:
        linear-gradient(var(--neon) 0 0) left top / var(--l) var(--b),
        linear-gradient(var(--neon) 0 0) left top / var(--b) var(--l),
        linear-gradient(var(--neon) 0 0) right top / var(--l) var(--b),
        linear-gradient(var(--neon) 0 0) right top / var(--b) var(--l),
        linear-gradient(var(--neon) 0 0) left bottom / var(--l) var(--b),
        linear-gradient(var(--neon) 0 0) left bottom / var(--b) var(--l),
        linear-gradient(var(--neon) 0 0) right bottom / var(--l) var(--b),
        linear-gradient(var(--neon) 0 0) right bottom / var(--b) var(--l);
    background-repeat: no-repeat;
}
.ink-panel:not(.still):hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 0 var(--neon), 10px 10px 0 var(--b) var(--ink); }
.ink-panel:not(.still):hover::after, .ink-panel.bracketed::after { opacity: 1; }
.ink-panel.flat { box-shadow: var(--shadow-sm); }

/* section heading: a small neon number over a Bungee title */
.section-num { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; color: var(--neon); letter-spacing: 0.15em; text-transform: lowercase; margin-bottom: 0.4rem; }
.highlight { background: linear-gradient(transparent 58%, var(--hi) 58%, var(--hi) 92%, transparent 92%); padding: 0 0.1em; }

/* ---- syntax highlight ---- */
.tk-kw { color: var(--tk-kw); font-weight: 700; }
.tk-str { color: var(--tk-str); }
.tk-num { color: var(--tk-num); }
.tk-com { color: var(--tk-com); font-style: italic; }
.tk-def { color: var(--tk-def); font-weight: 700; }
.tk-bi { color: var(--tk-bi); }
.tk-op { color: var(--tk-op); }

/* ---- toast: a sticker pill ---- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 1.1rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: lowercase;
    color: var(--ink);
    background: var(--paper);
    border: var(--b) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    animation: toastIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); }
.toast.success::before { background: var(--t-bool); }
.toast.warn::before { background: var(--hi); }
.toast.error::before { background: var(--neon); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}