/* MovieBuff's own theme: the values behind every design token the interface
   reads. The stylesheets of the site never name a colour, a radius or a shadow
   themselves; they read these, so another look is another copy of this file
   with other values. The contract — every token, what it is for — is in
   docs/theming.md.

   Indigo on cool greys: a colour of its own that none of the shelves wear
   (green, amber and grey) and that is not the gold of a grade. */

:root {
    --mb-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --mb-heading-weight: 700;
    --mb-heading-tracking: -0.015em;

    --mb-bg: #f4f5f9;
    --mb-surface: #fff;
    --mb-surface-rgb: 255, 255, 255;
    --mb-surface-sunken: #f1f2f7;
    --mb-surface-sunken-rgb: 241, 242, 247;
    --mb-surface-hover: #e7e9f1;
    --mb-surface-hover-rgb: 231, 233, 241;
    --mb-inverse-surface: #12151e;
    --mb-inverse-ink: #fff;

    --mb-ink: #1f2330;
    --mb-ink-rgb: 31, 35, 48;
    --mb-ink-strong: #10131c;
    --mb-ink-strong-rgb: 16, 19, 28;
    --mb-ink-muted: #5b6072;
    --mb-ink-faint: #7a8094;

    --mb-border: #dfe2ea;
    --mb-border-faint: rgb(16 19 40 / 0.08);

    --mb-accent: #4f46e5;
    --mb-accent-rgb: 79, 70, 229;
    --mb-accent-hover: #4338ca;
    --mb-accent-active: #3730a3;
    --mb-accent-contrast: #fff;
    --mb-accent-tint: #eef0ff;
    --mb-accent-edge: #c9ccfb;
    --mb-accent-strong: #312e81;
    --mb-focus-ring: rgb(79 70 229 / 0.3);

    --mb-link: #4338ca;
    --mb-link-rgb: 67, 56, 202;
    --mb-link-hover: #312e81;
    --mb-link-hover-rgb: 49, 46, 129;

    --mb-success: var(--bs-success);
    --mb-danger: var(--bs-danger);
    --mb-danger-ink: var(--bs-danger-text-emphasis);
    --mb-danger-contrast: #fff;

    --mb-radius-sm: 0.375rem;
    --mb-radius: 0.5rem;
    --mb-radius-lg: 1rem;
    --mb-radius-pill: 50rem;

    --mb-shadow-sm: 0 1px 2px rgb(16 19 40 / 0.05), 0 1px 4px rgb(16 19 40 / 0.04);
    --mb-shadow: 0 4px 14px rgb(16 19 40 / 0.1);
    --mb-shadow-lg: 0 14px 36px rgb(16 19 40 / 0.18);

    --mb-star: #d99e1f;
    --mb-star-empty: var(--mb-border);

    /* What a title is to somebody: green for seen, indigo for on the list,
       amber for a run under way, and two greys told apart by their fill —
       dropped is a shelf a member is on, untracked is the absence of one. */
    --mb-state-watched: var(--bs-success);
    --mb-state-watched-tint: var(--bs-success-bg-subtle);
    --mb-state-watched-edge: var(--bs-success-border-subtle);
    --mb-state-watched-ink: var(--bs-success-text-emphasis);

    --mb-state-watching: var(--bs-warning);
    --mb-state-watching-tint: var(--bs-warning-bg-subtle);
    --mb-state-watching-edge: var(--bs-warning-border-subtle);
    --mb-state-watching-ink: var(--bs-warning-text-emphasis);

    --mb-state-watchlist: var(--mb-accent);
    --mb-state-watchlist-tint: var(--mb-accent-tint);
    --mb-state-watchlist-edge: var(--mb-accent-edge);
    --mb-state-watchlist-ink: var(--mb-accent-strong);

    --mb-state-dropped: var(--mb-ink-muted);
    --mb-state-dropped-tint: var(--bs-secondary-bg-subtle);
    --mb-state-dropped-edge: var(--bs-secondary-border-subtle);
    --mb-state-dropped-ink: var(--bs-secondary-text-emphasis);

    --mb-state-untracked: var(--mb-ink-muted);
    --mb-state-untracked-tint: transparent;
    --mb-state-untracked-edge: var(--mb-border);
    --mb-state-untracked-ink: var(--mb-ink-muted);
}

/* The same theme at night. Only what differs is restated: the shelves, the
   grade and the status colours follow Bootstrap's own dark shades through the
   variables they already read. */
[data-bs-theme=dark] {
    --mb-bg: #0d0f16;
    --mb-surface: #161925;
    --mb-surface-rgb: 22, 25, 37;
    --mb-surface-sunken: #1c2030;
    --mb-surface-sunken-rgb: 28, 32, 48;
    --mb-surface-hover: #252a3c;
    --mb-surface-hover-rgb: 37, 42, 60;
    --mb-inverse-surface: #2c3146;
    --mb-inverse-ink: #fff;

    --mb-ink: #d9dce6;
    --mb-ink-rgb: 217, 220, 230;
    --mb-ink-strong: #f3f4f8;
    --mb-ink-strong-rgb: 243, 244, 248;
    --mb-ink-muted: #9aa0b4;
    --mb-ink-faint: #737a90;

    --mb-border: #2a2f42;
    --mb-border-faint: rgb(255 255 255 / 0.07);

    /* Lighter than by day so it still stands off the dark surface, and so a
       primary button carries dark words rather than white ones. */
    --mb-accent: #7b7bf0;
    --mb-accent-rgb: 123, 123, 240;
    --mb-accent-hover: #8f8ff3;
    --mb-accent-active: #a3a3f6;
    --mb-accent-contrast: #0d0f16;
    --mb-accent-tint: #23264a;
    --mb-accent-edge: #3b3f7a;
    --mb-accent-strong: #c7d2fe;
    --mb-focus-ring: rgb(123 123 240 / 0.4);

    --mb-link: #a5b4fc;
    --mb-link-rgb: 165, 180, 252;
    --mb-link-hover: #c7d2fe;
    --mb-link-hover-rgb: 199, 210, 254;

    --mb-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --mb-shadow: 0 4px 14px rgb(0 0 0 / 0.45);
    --mb-shadow-lg: 0 14px 36px rgb(0 0 0 / 0.55);
}