/*
 * vbacklog brand tokens. Plain CSS custom properties, no build step, no
 * framework — matches the project's HTMX/server-rendered-templates approach.
 * Consumers (eventually /src/dashboard) link this before their own styles.
 */

:root {
  /* Tell the UA which schemes we support, so form controls, scrollbars and
     the canvas behind the page follow the theme instead of staying light. */
  color-scheme: light dark;

  /* Base palette */
  --color-ink: #202124;
  --color-paper: #f3f3f1;
  --color-accent: #5c6670;   /* slate gray — primary brand accent */
  --color-accent-2: #9aa1a7; /* lighter steel gray — secondary accent */

  /* Semantic surface tokens (light mode default) */
  --color-bg: var(--color-paper);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: var(--color-ink);
  --color-text-muted: #6b6f73;
  --color-border: #dcdcda;
  --color-link: var(--color-accent);

  /* Media-server brand hues, for the "Play in <server>" icons only (one token per server, so the icon's color
     tells Plex from Jellyfin). Plex's orange, darkened in the light theme to keep 4.5:1 on the white card. */
  --brand-plex: #a86400;
  --brand-plex-hover: #8a5200;

  /* Status tokens — map directly to dashboard states in PROJECT_PLAN.md */
  --color-success: #4b6455;       /* placed */
  --color-success-bg: #e7ede7;
  --color-info: #3b6e8f;          /* pending_metadata / missing_subtitles (delay, not failure) */
  --color-info-bg: #e3edf3;
  /*
   * Darkened from #b98419, which measured 2.81:1 on its own badge background
   * and 3.29:1 on white — below AA, in the theme most people read. The dark
   * ramp below was measured when it was written; this light value never was.
   * Found while adding the confidence bands, which use this amber for "low"
   * and would have shipped an unreadable one.
   */
  --color-warning: #8d600b;       /* permission chmod/chown warning after a successful placement */
  --color-warning-bg: #f7ecd6;
  --color-danger: #b3402f;        /* blocked-permission / undo refused */
  --color-danger-bg: #f6e2dd;
  --color-review: #8a5a9e;        /* review queue — tie band, low confidence */
  --color-review-bg: #ede3f1;
  /* The episode strip along a poster's foot (user, 2026-09-24). It sits on
     the image behind a dark scrim, not on the page, so one pair serves both
     themes: the dark theme's success green (the light one is a sage that
     vanishes on the scrim) and a violet a shade darker than the Missing
     pill's text. Season rows on the page surface use the page tokens. */
  --color-episode-owned: #8fbf9f;
  --color-episode-missing: #7b52a6;
  /* An ordinary notice's bar (user, 2026-09-29): the brand slate, since blue
     is Pause all's and every other hue already means a status. The dark
     theme takes the lighter steel, which the slate is too faint to be. */
  --color-note: var(--color-accent);

  /*
   * Two extra ramps for the five confidence bands (#43).
   *
   * The bands run red → orange → yellow → light green → bright green, and the
   * status palette above only offers three of those: `danger`, `warning` and
   * `success` cover the two ends and the orange. The middle two have no status
   * meaning of their own — a confidence band describes a *match*, not a state
   * a file is in — so they are named for the ramp rather than for a status,
   * and nothing else should use them.
   *
   * Measured the same way as the dark ramp: each foreground clears 4.5:1
   * against its own badge background and against every surface it can sit on.
   * Lowest is `band-high` in light mode at 4.75:1.
   */
  --color-band-medium: #7a680c;
  --color-band-medium-bg: #f4efd2;
  --color-band-high: #4a7334;
  --color-band-high-bg: #e9f0e2;

  /*
   * The lit filament in the theme control's bulb (§19.1). A graphic rather
   * than text, so the bar is 3:1 against what sits behind it (WCAG 1.4.11),
   * and the thing behind it is the *page* ground, not the surface — the
   * control lives in the masthead. `#b8860b` was the first pick and measures
   * 2.93:1 there, which is why this is a shade darker: 3.40:1 on `--color-bg`
   * and 3.78:1 on white.
   */
  --color-bulb: #a87c0a;

  --font-sans: -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif; /* wordmark / headings only */

  /*
   * The dark ramp, declared once here and only *referenced* by the two dark
   * selectors below. Keeping the values in one place is not tidiness: an
   * earlier version of this file wrote them out twice and overrode only the
   * `-bg` half, which left every badge's foreground at its light-mode value.
   * `#4b6455` on `#22301f` measures 2.15:1 — a status colour that is invisible
   * in the theme where it matters is worse than no status colour, and reading
   * two near-identical blocks side by side is exactly how that gets missed.
   * Each foreground below clears 4.5:1 against its own badge background and
   * against all three dark surfaces (measured, lowest is danger at 5.5:1).
   */
  --dark-bg: #1b1c1e;
  --dark-surface: #232426;
  --dark-surface-raised: #2b2c2f;
  --dark-text: var(--color-paper);
  --dark-text-muted: #9a9ea1;
  --dark-border: #38393c;
  --dark-link: #a9b4bf;
  --dark-success: #8fbf9f;
  --dark-success-bg: #22301f;
  --dark-info: #7fb6d6;
  --dark-info-bg: #1c2c34;
  --dark-warning: #e0b352;
  --dark-warning-bg: #362c15;
  --dark-danger: #e8897a;
  --dark-danger-bg: #331c17;
  --dark-review: #c49ad6;
  --dark-review-bg: #2a1f30;
  --dark-note: var(--color-accent-2);
  --dark-band-medium: #dcc766;
  --dark-band-medium-bg: #312e18;
  --dark-band-high: #a8cf7f;
  --dark-band-high-bg: #26301c;

  /* 8.72:1 on the dark page ground. */
  --dark-bulb: #e0b352;

  /* Plex's own orange, 7.4:1 on the dark card. */
  --dark-brand-plex: #e5a00d;
  --dark-brand-plex-hover: #f5b82e;
}

/*
 * Two triggers, one mapping, repeated exactly once because CSS cannot share a
 * declaration block across a media query. If you add a token to one of these
 * blocks, add it to the other — that is the only duplication left, and the
 * values it refers to are single-sourced above.
 *
 *   1. OS preference, unless the operator has explicitly chosen light.
 *   2. An explicit `data-theme="dark"` on <html>, whatever the OS says.
 *
 * `[data-theme="light"]` needs no block of its own: it is excluded from the
 * media query, so the light values already on `:root` simply stand.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--dark-bg);
    --color-surface: var(--dark-surface);
    --color-surface-raised: var(--dark-surface-raised);
    --color-text: var(--dark-text);
    --color-text-muted: var(--dark-text-muted);
    --color-border: var(--dark-border);
    --color-link: var(--dark-link);
    --color-success: var(--dark-success);
    --color-success-bg: var(--dark-success-bg);
    --color-info: var(--dark-info);
    --color-info-bg: var(--dark-info-bg);
    --color-warning: var(--dark-warning);
    --color-warning-bg: var(--dark-warning-bg);
    --color-danger: var(--dark-danger);
    --color-danger-bg: var(--dark-danger-bg);
    --color-review: var(--dark-review);
    --color-review-bg: var(--dark-review-bg);
    --color-note: var(--dark-note);
    --color-band-medium: var(--dark-band-medium);
    --color-band-medium-bg: var(--dark-band-medium-bg);
    --color-band-high: var(--dark-band-high);
    --color-band-high-bg: var(--dark-band-high-bg);
    --color-bulb: var(--dark-bulb);
    --brand-plex: var(--dark-brand-plex);
    --brand-plex-hover: var(--dark-brand-plex-hover);
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--dark-bg);
  --color-surface: var(--dark-surface);
  --color-surface-raised: var(--dark-surface-raised);
  --color-text: var(--dark-text);
  --color-text-muted: var(--dark-text-muted);
  --color-border: var(--dark-border);
  --color-link: var(--dark-link);
  --color-success: var(--dark-success);
  --color-success-bg: var(--dark-success-bg);
  --color-info: var(--dark-info);
  --color-info-bg: var(--dark-info-bg);
  --color-warning: var(--dark-warning);
  --color-warning-bg: var(--dark-warning-bg);
  --color-danger: var(--dark-danger);
  --color-danger-bg: var(--dark-danger-bg);
  --color-review: var(--dark-review);
  --color-review-bg: var(--dark-review-bg);
  --color-note: var(--dark-note);
  --color-band-medium: var(--dark-band-medium);
  --color-band-medium-bg: var(--dark-band-medium-bg);
  --color-band-high: var(--dark-band-high);
  --color-band-high-bg: var(--dark-band-high-bg);
  --color-bulb: var(--dark-bulb);
  --brand-plex: var(--dark-brand-plex);
  --brand-plex-hover: var(--dark-brand-plex-hover);
}

/* Pin the UA's own widgets to the chosen theme, not the OS's. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-logo img,
.brand-logo svg {
  width: 1.6rem;
  height: 1.6rem;
}

.brand-wordmark {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

/*
 * Theme-aware wordmark: two <img>s, one per variant, toggled by `display`.
 * Same two triggers as the dark ramp above (OS preference, explicit
 * `data-theme`), so there is no flash — the server already writes
 * `data-theme` from the cookie before the first byte (§19.1), and the OS
 * media query covers the "system" case. No JavaScript involved, matching the
 * no-`unsafe-inline` CSP this app runs under.
 */
.wordmark-img {
  display: block;
}

.wordmark-img[data-variant="dark"] {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark-img[data-variant="light"] {
    display: none;
  }

  :root:not([data-theme="light"]) .wordmark-img[data-variant="dark"] {
    display: block;
  }
}

:root[data-theme="dark"] .wordmark-img[data-variant="light"] {
  display: none;
}

:root[data-theme="dark"] .wordmark-img[data-variant="dark"] {
  display: block;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-review { background: var(--color-review-bg); color: var(--color-review); }