/*
 * Design tokens for the neobrutalist theme, ported from the club website
 * (chessfanatics-webpage, Nuxt + Tailwind v4 `@theme` block).
 *
 * This file holds tokens and base element styles only — no component selectors.
 * Component-level corrections to Bootstrap/Havit live in theme-bootstrap.css.
 *
 * It is also the only stylesheet that spells out a colour. Everything else reads a
 * role token (--cf-ink, --cf-line, --cf-paper, ...), and the dark theme at the
 * bottom re-points those roles. The accent palette itself is shared by both themes.
 */

:root {
    /* ---- primary ramp ---- */
    --cf-pink-50: #fcf3f9;
    --cf-pink-100: #f9eaf4;
    --cf-pink-200: #f5d5eb;
    --cf-pink-300: #efb2db;
    --cf-pink-400: #e177bc;
    --cf-pink-500: #d75da9;
    --cf-pink-600: #c43e8b;
    --cf-pink-700: #a92d70;
    --cf-pink-800: #8c285d;
    --cf-pink-900: #752650;
    --cf-pink-950: #47102d;

    /* ---- accents ---- */
    --cf-pink: var(--cf-pink-400);
    --cf-pink-rgb: 225, 119, 188;
    --cf-blue: #b4ceff;
    --cf-yellow: #f9e79f;
    --cf-salmon: #fea4a4;

    /* button states per accent: hover lifts lighter, pressed goes deeper, disabled washes out */
    --cf-pink-hover: var(--cf-pink-300);
    --cf-pink-active: var(--cf-pink-500);
    --cf-pink-disabled: var(--cf-pink-200);
    --cf-blue-hover: #cddfff;
    --cf-blue-active: #9dbdf7;
    --cf-blue-disabled: #e2ebff;
    --cf-yellow-hover: #fbefc0;
    --cf-yellow-active: #f2d97a;
    --cf-yellow-disabled: #fdf6dd;
    --cf-salmon-hover: #ffbcbc;
    --cf-salmon-active: #f98c8c;
    --cf-salmon-disabled: #ffd9d9;

    /*
     * Large accent areas: the sidebar, table heads, card headers, active tabs, alerts.
     * They carry --cf-ink text, unlike the fills above, which carry --cf-on-accent.
     * Same colour as the fills here; the dark theme deepens them so a full-height
     * yellow sidebar does not glare.
     */
    --cf-pink-surface: var(--cf-pink);
    --cf-blue-surface: var(--cf-blue);
    --cf-yellow-surface: var(--cf-yellow);
    --cf-yellow-surface-active: var(--cf-yellow-active);
    --cf-salmon-surface: var(--cf-salmon);
    /* a pairing whose result is in */
    --cf-blue-tint: #eef4ff;

    /* ---- roles ---- */

    /* text and icons on paper, canvas, tints and accent surfaces */
    --cf-ink: #000;
    --cf-ink-rgb: 0, 0, 0;
    /* text and icons on an accent fill; dark in both themes, because the fills stay pastel */
    --cf-on-accent: #000;
    /* frames, dividers, the wavy underline and the offset shadow */
    --cf-line: #000;

    --cf-paper: #fff;
    --cf-paper-rgb: 255, 255, 255;
    /* the page behind the paper surfaces */
    --cf-canvas: #f3f3f3;

    /* secondary copy; Bootstrap's default rgba(33,37,41,.75) is too weak against the hard black */
    --cf-muted: #4a4a4a;
    --cf-muted-rgb: 74, 74, 74;
    /* errors keep a true red — salmon reads as decoration, not danger */
    --cf-error: #c20000;
    --cf-error-rgb: 194, 0, 0;
    --cf-success: #0a7d32;
    --cf-success-rgb: 10, 125, 50;

    /* pink as a text colour: links, hovered labels, the Elo figure */
    --cf-link: var(--cf-pink-600);
    --cf-link-rgb: 196, 62, 139;
    --cf-link-hover: var(--cf-pink-700);
    --cf-link-hover-rgb: 169, 45, 112;

    /* quiet fills behind ink: striped rows, input add-ons, a hovered menu item */
    --cf-tint: var(--cf-pink-50);
    --cf-tint-strong: var(--cf-pink-100);
    --cf-hairline: rgba(0, 0, 0, .14);
    --cf-hover-tint: rgba(0, 0, 0, .04);

    --cf-focus: var(--cf-blue);

    /* chess semantics and the modal scrim do not follow the theme */
    --cf-piece-white: #fff;
    --cf-piece-black: #000;
    --cf-scrim: #000;

    /*
     * Glyphs Bootstrap paints as SVG data URIs. A data URI cannot read a custom
     * property, so each theme spells out its own copy in the matching colour.
     */
    --cf-icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    /* the tick and the "on" knob sit on the pink fill: on-accent */
    --cf-icon-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --cf-icon-switch-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
    /* the "off" knob sits on paper: line */
    --cf-icon-switch-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
    --cf-icon-menu: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --cf-icon-menu-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M6 6l18 18M24 6L6 24'/%3e%3c/svg%3e");

    /* ---- shape ---- */
    --cf-border-width: 2px;
    --cf-border: var(--cf-border-width) solid var(--cf-line);

    /*
     * Offset shadow. It grows by exactly the distance the element travels, so the
     * bottom-right shadow edge stays pinned and the element appears to move toward
     * and away from the page. Reserved for pressable surfaces.
     */
    --cf-shadow: 2px 2px 0 0 var(--cf-line);
    --cf-shadow-lg: 6px 6px 0 0 var(--cf-line);
    --cf-shadow-sm: 2px 2px 0 0 var(--cf-line);
    --cf-lift: translate(-2px, -2px);
    --cf-press: translate(2px, 2px);
    --cf-transition: box-shadow .2s, transform .2s;

    /* ---- type ---- */
    --cf-font-head: "Barlow", ui-monospace, SFMono-Regular, monospace;
    --cf-font-body: "Barlow", system-ui, -apple-system, sans-serif;
    --cf-tracking-ui: .025em;

    /* ================= Bootstrap remap ================= */
    /*
     * Every value below is a --cf-* role, never a literal, so the dark theme only has
     * to re-point the roles. They resolve on <html>, the same element that carries
     * data-bs-theme, so they pick up the dark values without being restated.
     */

    --bs-primary: var(--cf-pink);
    --bs-primary-rgb: var(--cf-pink-rgb);
    /* .text-success / .text-danger / .text-secondary use the theme's own tones, not Bootstrap's */
    --bs-success: var(--cf-success);
    --bs-success-rgb: var(--cf-success-rgb);
    --bs-danger: var(--cf-error);
    --bs-danger-rgb: var(--cf-error-rgb);
    --bs-secondary: var(--cf-muted);
    --bs-secondary-rgb: var(--cf-muted-rgb);

    /*
     * Alert/badge subtle tokens. Bootstrap builds .alert-* and the *-subtle
     * utilities out of these three per colour, so remapping them here restyles
     * every alert without touching a single call site.
     */
    --bs-primary-text-emphasis: var(--cf-ink);
    --bs-primary-bg-subtle: var(--cf-pink-surface);
    --bs-primary-border-subtle: var(--cf-line);
    --bs-danger-text-emphasis: var(--cf-ink);
    --bs-danger-bg-subtle: var(--cf-salmon-surface);
    --bs-danger-border-subtle: var(--cf-line);
    --bs-warning-text-emphasis: var(--cf-ink);
    --bs-warning-bg-subtle: var(--cf-yellow-surface);
    --bs-warning-border-subtle: var(--cf-line);
    --bs-info-text-emphasis: var(--cf-ink);
    --bs-info-bg-subtle: var(--cf-blue-surface);
    --bs-info-border-subtle: var(--cf-line);
    --bs-success-text-emphasis: var(--cf-ink);
    --bs-success-bg-subtle: var(--cf-blue-surface);
    --bs-success-border-subtle: var(--cf-line);
    --bs-secondary-text-emphasis: var(--cf-ink);
    --bs-secondary-bg-subtle: var(--cf-paper);
    --bs-secondary-border-subtle: var(--cf-line);
    --bs-light-text-emphasis: var(--cf-ink);
    --bs-light-bg-subtle: var(--cf-paper);
    --bs-light-border-subtle: var(--cf-line);
    --bs-dark-text-emphasis: var(--cf-ink);
    --bs-dark-bg-subtle: var(--cf-tint);
    --bs-dark-border-subtle: var(--cf-line);

    /* ---- surface ---- */
    --bs-body-bg: var(--cf-paper);
    --bs-body-bg-rgb: var(--cf-paper-rgb);
    --bs-body-color: var(--cf-ink);
    --bs-body-color-rgb: var(--cf-ink-rgb);
    --bs-emphasis-color: var(--cf-ink);
    --bs-emphasis-color-rgb: var(--cf-ink-rgb);
    --bs-heading-color: var(--cf-ink);
    /* drives .text-muted, used on 33 call sites */
    --bs-secondary-color: var(--cf-muted);
    --bs-secondary-color-rgb: var(--cf-muted-rgb);
    --bs-secondary-bg: var(--cf-tint);
    --bs-tertiary-color: var(--cf-muted);
    --bs-tertiary-color-rgb: var(--cf-muted-rgb);
    --bs-tertiary-bg: var(--cf-tint);

    /* ---- type ---- */
    --bs-body-font-family: var(--cf-font-body);
    --bs-body-font-size: 1.1875rem;
    --bs-body-line-height: 1.55;

    /* ---- shape ---- */
    --bs-border-width: var(--cf-border-width);
    --bs-border-color: var(--cf-line);
    /* card, modal, list-group, dropdown and nav-tabs all read the translucent one */
    --bs-border-color-translucent: var(--cf-line);

    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;

    /* `a` resolves its colour through the rgb triple, so the plain --bs-link-color is not enough */
    --bs-link-color: var(--cf-link);
    --bs-link-color-rgb: var(--cf-link-rgb);
    --bs-link-hover-color: var(--cf-link-hover);
    --bs-link-hover-color-rgb: var(--cf-link-hover-rgb);
    --bs-link-decoration: underline;

    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 1;
    --bs-focus-ring-color: var(--cf-focus);

    --bs-box-shadow: var(--cf-shadow);
    --bs-box-shadow-sm: var(--cf-shadow-sm);
    --bs-box-shadow-lg: var(--cf-shadow-lg);
    --bs-box-shadow-inset: none;

    --bs-code-color: var(--cf-link-hover);
    --bs-highlight-bg: var(--cf-yellow-surface);
    --bs-highlight-color: var(--cf-ink);

    --bs-form-invalid-color: var(--cf-error);
    --bs-form-invalid-border-color: var(--cf-error);
    --bs-form-valid-color: var(--cf-success);
    --bs-form-valid-border-color: var(--cf-success);
}

/*
 * ================= dark theme =================
 *
 * Switched by data-bs-theme="dark" on <html> (theme.js / App.razor). The extra
 * :root raises specificity above Bootstrap's and Havit's own [data-bs-theme=dark]
 * blocks, which would otherwise win for the variables they share with us.
 *
 * Only roles change. The accent fills keep their pastel colours and dark text,
 * so buttons, badges and the brand read the same in both themes.
 */
:root[data-bs-theme="dark"] {
    --cf-ink: #ede4e4;
    --cf-ink-rgb: 244, 238, 242;
    --cf-line: #000000;
    --cf-on-accent: #000;

    --cf-paper: #1c151f;
    --cf-paper-rgb: 31, 27, 33;
    --cf-canvas: #141116;

    --cf-muted: #b8adb4;
    --cf-muted-rgb: 184, 173, 180;
    --cf-error: #ff7b7b;
    --cf-error-rgb: 255, 123, 123;
    --cf-success: #62d68f;
    --cf-success-rgb: 98, 214, 143;

    /* the 600/700 steps fall below AA on dark paper; go up the ramp instead */
    --cf-link: var(--cf-pink-300);
    --cf-link-rgb: 239, 178, 219;
    --cf-link-hover: var(--cf-pink-700);
    --cf-link-hover-rgb: 245, 213, 235;

    --cf-tint: #2b2229;
    --cf-tint-strong: #3a2834;
    --cf-hairline: rgba(255, 255, 255, .16);
    --cf-hover-tint: rgba(255, 255, 255, .05);

    /* deep versions of the accents for the large areas, so they carry light ink */
    --cf-pink: var(--cf-pink-700);
    --cf-yellow: #ffcc00;
    --cf-pink-surface: #5e1f42;
    --cf-blue-surface: #243a63;
    --cf-yellow-surface: #111c43;
    --cf-yellow-surface-active: #644f21;
    --cf-salmon-surface: #672a2a;
    --cf-blue-tint: #1b2233;

    /*
     * The button disabled fills stay pastel on purpose: .btn fades a disabled button
     * to 40% as a whole, and only a light fill keeps the on-accent label legible
     * once it is blended into dark paper.
     */

    --cf-icon-select: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f4eef2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --cf-icon-switch-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f4eef2'/%3e%3c/svg%3e");
    --cf-icon-menu: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f4eef2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --cf-icon-menu-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f4eef2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M6 6l18 18M24 6L6 24'/%3e%3c/svg%3e");

    --cf-shadow: 2px 2px 0 0 var(--cf-line);
    --cf-border-width: 2px;
}

/* ---------------- base elements ---------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--cf-font-head);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--cf-ink);
}

/*
 * Links carry their weight as well as their colour. Element-level, so components
 * that set their own weight (.btn, .nav-link, .event-title) keep theirs.
 */
a {
    font-weight: bolder;
}

/* the template removes the underline on hover rather than adding one */
a:hover {
    text-decoration: none;
}

::selection {
    background: var(--cf-yellow-surface);
    color: var(--cf-ink);
}

::placeholder {
    color: var(--cf-muted) !important;
    opacity: 1;
}

hr {
    border-top: var(--cf-border);
    opacity: 1;
}

input {
    font-size: 1.15rem;
}

/*
 * The offset shadow and the travel are the whole point of the style, but they are
 * motion. Honour a reduced-motion preference by keeping the shadow and dropping
 * the movement.
 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
    }
}