/* Re-themes Django admin with the frontend palette (theme.css must load first, it also supplies the
   Inter faces). Only admin's own CSS variables are overridden, so its layout is untouched.

   Every value is a reference to a palette variable, and the palette flips with `html.dark`
   (preferences.js adds it for `data-theme="dark"`, and for `auto` when the OS is dark), so one
   mapping serves both modes and admin's own theme toggle keeps working. Same specificity as
   admin's own `html[data-theme=...]` blocks, and later, so these win.

   `--primary`, `--secondary` and `--accent` exist in both vocabularies: the palette wins for
   `--primary` (the brand blue in both modes), while the other two are re-pointed at the soft
   surface below, because admin uses them as backgrounds under dark-on-light text (selector
   widget titles, calendar). */

:root,
html[data-theme],
html.dark[data-theme] {
  --secondary: var(--muted);
  --accent: var(--muted);
  --primary-fg: var(--primary-foreground);

  --body-fg: var(--foreground);
  --body-bg: var(--background);
  --body-quiet-color: var(--muted-foreground);
  --body-medium-color: var(--secondary-foreground);
  --body-loud-color: var(--foreground);

  --header-color: var(--foreground);
  --header-branding-color: var(--foreground);
  --header-bg: var(--background);
  --header-link-color: var(--foreground);

  --breadcrumbs-fg: var(--muted-foreground);
  --breadcrumbs-link-fg: var(--primary);
  /* Softer than --muted: the brand blue on --muted measured 4.48:1, just under AA. */
  --breadcrumbs-bg: color-mix(in oklab, var(--muted) 55%, var(--background));

  --link-fg: var(--primary);
  --link-hover-color: var(--foreground);
  --link-selected-fg: var(--primary);

  --hairline-color: var(--border);
  /* Input borders need 3:1 against the background (WCAG 1.4.11); the palette's --input does. */
  --border-color: var(--input);

  --error-fg: var(--destructive-text);

  --message-success-bg: var(--success-tint);
  --message-warning-bg: var(--warning-tint);
  --message-error-bg: var(--destructive-tint);

  --darkened-bg: color-mix(in oklab, var(--muted) 55%, var(--background));
  --selected-bg: color-mix(in oklab, var(--muted) 55%, var(--background));
  --selected-row: color-mix(in oklab, var(--primary) 7%, var(--background));

  --button-fg: var(--primary-foreground);
  --button-bg: var(--primary);
  --button-hover-bg: var(--primary);
  --default-button-bg: var(--primary);
  --default-button-hover-bg: var(--primary);
  --close-button-bg: var(--muted-foreground);
  --close-button-hover-bg: var(--foreground);
  --delete-button-bg: var(--destructive);
  --delete-button-hover-bg: var(--destructive);

  --font-family-primary: "Inter", ui-sans-serif, system-ui, sans-serif;
}

#header {
  border-bottom: 1px solid var(--border);
}

/* Admin pairs these widget backgrounds with the header link colour (dark text on the light header
   here) or with hard-coded text; give each one explicit, palette-based colours. */
.selector-chosen .list-footer-display,
.selector-chosen .list-footer-display__clear {
  color: var(--primary-foreground);
}

.selector-chosen-title label {
  color: var(--foreground);
  background: var(--muted);
}

.calendar td.selected a,
.calendar td a:focus,
.timelist a:focus,
.calendar td a:hover,
.timelist a:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

#header #branding {
  display: flex;
  align-items: center;
}

#site-name a.brand-mark:link,
#site-name a.brand-mark:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--foreground);
  font-weight: 600;
}

.brand-mark__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--primary-foreground);
}

.brand-mark__icon svg {
  width: 18px;
  height: 18px;
}

.theme-toggle svg {
  color: var(--foreground);
}

/* Hover feedback for buttons whose background is a single palette colour. */
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover {
  filter: brightness(0.92);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}