/* Warm paper is the ground and pure white is reserved for raised surfaces, so base-200 (not base-100) is the page background.
 * One identity colour, a deep ink blue: nothing decorative uses it and nothing adds a second hue.
 * Tokens are --brand- prefixed because the unprefixed names (--text-lg, --space-4) are Tailwind's own namespace. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Scoped to the two theme names, not :root: under a stock DaisyUI theme the brand names are undeclared,
 * so every slot would resolve to nothing with no error. The registers differ only in palette, so everything else is shared here. */

[data-theme="myocd"],
[data-theme="myocd-dark"] {
  /* base-100 is the raised surface (cards, modals, dropdowns), where the reserved white belongs. */
  --color-base-100: var(--brand-surface);
  --color-base-200: var(--brand-paper);
  --color-base-300: var(--brand-line);
  --color-base-content: var(--brand-ink);

  --root-bg: var(--color-base-200);

  --color-primary: var(--brand-ink-blue);
  --color-primary-content: var(--brand-on-ink-blue);
  --color-accent: var(--brand-ink-blue-tint);
  --color-accent-content: var(--brand-on-ink-blue-tint);
  --color-neutral: var(--brand-ink);
  --color-neutral-content: var(--brand-paper);
  --color-info: var(--brand-ink-blue-bright);
  --color-info-content: var(--brand-on-ink-blue);
  --color-success: var(--brand-success);
  --color-success-content: var(--brand-on-success);
  --color-warning: var(--brand-warning);
  --color-warning-content: var(--brand-on-warning);
  --color-error: var(--brand-danger);
  --color-error-content: var(--brand-on-danger);

  /* Components take the brand's own radii, never a capsule or a disc. --radius-sm/md/lg is Tailwind's own scale, overridden so a
   * rounded-lg in a template lands on the brand radius. A chart may still be round when the reading is an arc. */
  --radius-selector: 3px;
  --radius-field: 5px;
  --radius-box: 8px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;

  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand-font-ui: var(--font-sans);
  --brand-font-voice: var(--font-serif);

  /* --brand-text-lg is a floor for the person's own words, not a step. */
  --brand-text-xs: 0.75rem;
  --brand-text-sm: 0.875rem;
  --brand-text-base: 1rem;
  --brand-text-lg: 1.0625rem;
  --brand-text-xl: 1.375rem;
  --brand-text-2xl: 1.75rem;
  --brand-text-3xl: 2.5rem;
  --brand-leading-tight: 1.25;
  --brand-leading-ui: 1.5;
  --brand-leading-read: 1.7;

  --brand-space-1: 0.25rem;
  --brand-space-2: 0.5rem;
  --brand-space-3: 0.75rem;
  --brand-space-4: 1rem;
  --brand-space-5: 1.5rem;
  --brand-space-6: 2rem;
  --brand-space-7: 3rem;
  --brand-space-8: 4rem;
}

[data-theme="myocd"] {
  color-scheme: light;

  /* --line is decorative at 1.32:1; where a boundary carries meaning, --line-strong is the token. */
  --brand-paper: #FAF7F2;
  --brand-surface: #FFFFFF;
  --brand-sunk: #F1ECE3;
  --brand-line: #E0D8CC;
  --brand-line-strong: #7C7264;

  /* --ink-blue-text is the identity colour as type and --ink-blue is the fill; they are not interchangeable. */
  --brand-ink: #1F2530;
  --brand-ink-soft: #454E5C;
  --brand-ink-faint: #5C6675;
  --brand-ink-blue: #33456E;
  --brand-ink-blue-text: #2E3F65;
  --brand-ink-blue-bright: #4A6396;
  --brand-ink-blue-tint: #E4E8F1;
  --brand-on-ink-blue: #FFFFFF;
  --brand-on-ink-blue-tint: #263251;
  --brand-focus: #33456E;

  /* Never set text on a ramp cell: the value belongs in a tooltip on a plain surface. */
  --brand-level-1: #E4E9F2;
  --brand-level-2: #B5C3DB;
  --brand-level-3: #8497BE;
  --brand-level-4: #5A6D99;
  --brand-level-5: #33456E;

  /* Handed out in this order and never cycled; a sixth category folds into "other" (docs/adr/0030-colour-may-tell-categories-apart.md).
   * Three sit below 3:1 on the light surface, so a chart names every category in text beside it. */
  --brand-series-1: #2A78D6;
  --brand-series-2: #EB6834;
  --brand-series-3: #1BAF7A;
  --brand-series-4: #EDA100;
  --brand-series-5: #E87BA4;

  /* Semantics describe what the software did, never anything the person logged: an episode is not an error. */
  --brand-success: #2C6048;
  --brand-success-tint: #E1EDE6;
  --brand-on-success: #FFFFFF;
  --brand-on-success-tint: #204734;
  --brand-warning: #8B5A20;
  --brand-warning-tint: #F6EBDB;
  --brand-on-warning: #FFFFFF;
  --brand-on-warning-tint: #6A4517;
  --brand-danger: #76211A;
  --brand-danger-tint: #F6E3E0;
  --brand-on-danger: #FFFFFF;
  --brand-on-danger-tint: #5E1A14;

  /* The stone has no brand name, so it is written straight onto the framework slot. The boundary colour is pinned by the
   * none/some hairline, so the fill went darker instead until its label was readable. */
  --color-secondary: #63594A;
  --color-secondary-content: #FFFFFF;
}

/* Explicitly not a blue-black stealth register: no blacked-out surface here, and none should be added. */

[data-theme="myocd-dark"] {
  color-scheme: dark;

  --brand-paper: #1B1A17;
  --brand-surface: #24221E;
  --brand-sunk: #131211;
  --brand-line: #38342E;
  --brand-line-strong: #8C8477;

  --brand-ink: #F2EEE7;
  --brand-ink-soft: #C6BFB4;
  --brand-ink-faint: #9E968A;
  --brand-ink-blue: #9BB0D8;
  --brand-ink-blue-text: #A9BCE0;
  --brand-ink-blue-bright: #C0CEE9;
  --brand-ink-blue-tint: #2A3040;
  --brand-on-ink-blue: #141924;
  --brand-on-ink-blue-tint: #B9C7E4;
  --brand-focus: #9BB0D8;

  --brand-level-1: #22262F;
  --brand-level-2: #3D4657;
  --brand-level-3: #5F6D8A;
  --brand-level-4: #8593B4;
  --brand-level-5: #B5C3DC;

  --brand-series-1: #3987E5;
  --brand-series-2: #D95926;
  --brand-series-3: #199E70;
  --brand-series-4: #C98500;
  --brand-series-5: #D55181;

  --brand-success: #7DC3A0;
  --brand-success-tint: #1E2C25;
  --brand-on-success: #10201A;
  --brand-on-success-tint: #9BD4B7;
  --brand-warning: #DBA765;
  --brand-warning-tint: #302518;
  --brand-on-warning: #241A0E;
  --brand-on-warning-tint: #E8BE8A;
  --brand-danger: #D4726A;
  --brand-danger-tint: #33201E;
  --brand-on-danger: #2A100E;
  --brand-on-danger-tint: #F0A69F;

  /* Lighter here for the same reason the light theme's is darker: the fill moves away from the boundary colour. */
  --color-secondary: #B2A48A;
  --color-secondary-content: #1B1A17;
}

/* --brand-sunk and --brand-paper are ~1.05:1 apart, so the rail needs an explicit hairline edge (logical property, for RTL).
 * Reached through django-mvp's bg-base-200 class because neither package names the footer div; `:last-child` couples to the packaged markup.
 * Outside both [data-theme] blocks because the tokens are declared in both. */

.mvp-sidebar {
  background-color: var(--brand-sunk);
  border-inline-end: 1px solid var(--brand-line);
}

.mvp-sidebar .mvp-sidebar-header {
  background-color: var(--brand-sunk);
}

.mvp-sidebar > .bg-base-200:last-child {
  background-color: var(--brand-sunk);
}

/* The framework paints pinned header and footer rows white, which reads as a separate object on the paper ground.
 * It sets this inside :where(), so a plain selector wins. */

.table-pin-rows thead tr {
  background-color: var(--brand-paper);
}

.table-pin-rows tfoot tr {
  background-color: var(--brand-paper);
}

/* Values are those crispy-tailwind gives an ordinary input, so a picker and the field above it are the same shape.
 * Selectors are prefixed with `body`: each widget re-loads the vendor sheet after this file, so one extra element beats it
 * without !important. Reordering the links in templates/base.html does not help. */

/* The vendor sizes the wrapper to its content, so a control whose content is momentarily empty would shrink. */
body .ts-wrapper {
  width: 100%;
}

body .ts-wrapper .ts-control,
body .ts-wrapper.multi.has-items .ts-control {
  min-height: 42px;
  /* The right edge is the vendor's to set: it reserves room for the caret and clear button. */
  padding-block: 0.5rem;
  padding-inline-start: 1rem;
  border-radius: var(--radius-box);
  border: 1px solid var(--brand-line);
  background-color: var(--brand-surface);
  /* The vendor's gradient and inset highlight made the picker read as a raised chip beside a flat input. */
  background-image: none;
  box-shadow: none;
  color: var(--brand-ink);
  font-size: var(--brand-text-base);
  line-height: var(--brand-leading-ui);
  gap: var(--brand-space-2);
}

body .ts-wrapper.focus .ts-control,
body .ts-wrapper .ts-control:focus-within {
  border-color: var(--brand-ink-blue);
  box-shadow: none;
  outline: none;
}

/* The single-select paints itself with a `background` shorthand, so the gradient returns unless this rule names the same wrapper. */
body .ts-wrapper.single .ts-control {
  background: var(--brand-surface);
  box-shadow: none;
}

body .ts-wrapper.disabled .ts-control {
  background-color: var(--brand-paper);
  opacity: 1;
}

/* Selectors mirror the vendor's (`> div`, `[data-value]` under `.multi`) because a shorter one loses to it.
 * The vendor's `margin: 0 3px 3px 0` put chips above the centre line, so the margin is removed. */
body .ts-wrapper.multi .ts-control > div,
body .ts-wrapper.multi .ts-control [data-value] {
  background: var(--brand-ink-blue);
  color: var(--brand-on-ink-blue);
  border: none;
  border-radius: var(--radius-field);
  margin: 0;
  padding-block: 0.125rem;
  padding-inline: var(--brand-space-2);
  font-size: var(--brand-text-sm);
}

/* The plugin zeroes the chip's right padding for the cross, so the spacing below is the chip's right-hand breathing room. */
body .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove,
body .ts-wrapper.plugin-remove_button.rtl .item .remove {
  padding-inline: var(--brand-space-2);
  margin-inline-start: var(--brand-space-2);
  border-inline-start: 1px solid var(--brand-ink-blue-bright);
  border-block: none;
  border-inline-end: none;
  border-radius: 0;
  color: inherit;
  opacity: 0.85;
}

body .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove:hover,
body .ts-wrapper.plugin-remove_button.rtl .item .remove:hover {
  background: var(--brand-ink-blue-text);
  opacity: 1;
}

body .ts-wrapper.multi .ts-control > div.active,
body .ts-wrapper.multi .ts-control [data-value].active {
  background: var(--brand-ink-blue-text);
  color: var(--brand-on-ink-blue);
  border: none;
}

body .ts-dropdown {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-box);
  background-color: var(--brand-surface);
  color: var(--brand-ink);
  font-size: var(--brand-text-base);
}

body .ts-dropdown .active {
  background-color: var(--brand-ink-blue-tint);
  color: var(--brand-on-ink-blue-tint);
}

/* The vendor tints group headers and indents both alike, which makes a short list look like a table. */
body .ts-dropdown .optgroup-header {
  color: var(--brand-ink-blue-text);
  font-size: var(--brand-text-sm);
  font-weight: 700;
  background-color: transparent;
  padding-inline-start: var(--brand-space-2);
}

body .ts-dropdown .optgroup {
  border-top: none;
}

body .ts-dropdown .optgroup .option {
  padding-inline-start: var(--brand-space-4);
}

/* django-tomselect marks its live region with Bootstrap's `visually-hidden`; Tailwind calls it `sr-only`,
 * so the announcement rendered visibly under every picker. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* crispy-tailwind gives each radio label a right margin and then `display: block`, which stacks them; a row honours the margin. */

.radio-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--brand-space-4);
}

.radio-row > div > label {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-space-2);
  margin-inline-end: 0;
}