/* Shared palette (light + `.dark`) and the self-hosted Inter faces. Plain CSS, no Tailwind
   directives, so the same file feeds the Tailwind build (assets/css/app.css) and the Django admin
   (admin.css), which maps its own variables onto these.

   Values start from KTUI 1.2.7's styles/vars.css (MIT, https://github.com/keenthemes/ktui),
   then apply the design prototype's overrides: a darker primary (white text on it passes 4.5:1),
   a slightly stronger border/input, and a muted foreground that passes 4.5:1 on white.
   Dark-mode values were measured against WCAG AA (apps/frontend/README.md lists the ratios). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.da03732a27e1.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.51205681a1ba.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.2ede57db1a3a.woff2") format("woff2");
}

/* `html[data-theme]` / `html.dark[data-theme]` are there for the Django admin: its own stylesheet
   defines `--primary` (and friends) on `html[data-theme="light"|"dark"]`, which has higher
   specificity than a bare `:root` or `.dark`. preferences.js sets data-theme on every page. */
:root,
html[data-theme] {
  --background: oklch(1 0 0);
  --foreground: oklch(14.1% 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(14.1% 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(14.1% 0.005 285.823);
  --primary: oklch(54.6% 0.245 262.881);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(96.7% 0.003 264.542);
  --secondary-foreground: oklch(21% 0.006 285.885);
  --muted: oklch(96.7% 0.003 264.542);
  --muted-foreground: oklch(48% 0.016 285.938);
  --accent: oklch(96.7% 0.003 264.542);
  --accent-foreground: oklch(21% 0.006 285.885);
  --destructive: oklch(57.7% 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --mono: oklch(14.1% 0.005 285.823);
  --mono-foreground: oklch(1 0 0);
  --border: oklch(92% 0.004 286.32);
  /* Control borders need 3:1 against the surface (WCAG 1.4.11); the prototype's 87% measured 1.4:1. */
  --input: oklch(66% 0.012 286);
  --ring: oklch(87.1% 0.006 286.286);
  --radius: 0.5rem;

  /* Status tints, used where a surface (Django admin messages) needs a coloured background. */
  --success-tint: oklch(96.2% 0.044 156.743);
  --success-text: oklch(44.8% 0.119 151.328);
  --warning-tint: oklch(98.7% 0.026 102.212);
  --warning-text: oklch(47.6% 0.114 61.907);
  --destructive-tint: oklch(97.1% 0.013 17.38);
  --destructive-text: oklch(50.5% 0.213 27.518);
}

.dark,
html.dark[data-theme] {
  --background: oklch(14.1% 0.005 285.823);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(14.1% 0.005 285.823);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(14.1% 0.005 285.823);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(62.3% 0.214 259.815);
  --primary-foreground: oklch(14.1% 0.005 285.823);
  --secondary: oklch(27.4% 0.006 286.033);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(21% 0.006 285.885);
  --muted-foreground: oklch(70.5% 0.015 286.067);
  --accent: oklch(21% 0.006 285.885);
  --accent-foreground: oklch(98.5% 0 0);
  /* Lighter than light mode's: destructive is also used as text (errors, required marks) and the
     light mode red measured 4.2:1 on this background. Dark text on it for filled buttons. */
  --destructive: oklch(66% 0.21 25.3);
  --destructive-foreground: oklch(14.1% 0.005 285.823);
  --mono: oklch(87.1% 0.006 286.286);
  --mono-foreground: oklch(0 0 0);
  --border: oklch(27.4% 0.006 286.033);
  --input: oklch(54% 0.016 285.9);
  --ring: oklch(55.2% 0.016 285.938);

  --success-tint: oklch(26.6% 0.065 152.934 / 55%);
  --success-text: oklch(79.2% 0.209 151.711);
  --warning-tint: oklch(28.6% 0.066 53.813 / 55%);
  --warning-text: oklch(85.2% 0.199 91.936);
  --destructive-tint: oklch(25.8% 0.092 26.042 / 55%);
  --destructive-text: oklch(80.8% 0.114 19.571);
}
