/* ══════════════════════════════════════════════════════════════════════════
   „Éjszakai tenger" — the dark palette, and the base every dark theme layers on.

   Nothing in here is wrapped in `@media (prefers-color-scheme: dark)`: the
   media query moved onto the <link> that loads this file, so the same one copy
   serves all three ways it is asked for — the machine saying dark („Rendszer
   szerint"), this theme chosen outright, and „Éjfél", which loads this file
   first and then repaints only the colours it disagrees about. App\Theme is
   what decides; nothing here needs to know which of the three happened.

   That last case is why the *component* work below — the login photograph's
   heavier wash, the settings preview's — lives here rather than in a per-theme
   file: it is true of any dark page, and a second dark theme restating it would
   be a second copy to keep in step.

   Two rules. **Load this last** — after app.css, pages.css and any page
   stylesheet — because it wins by order, not by specificity; the selectors here
   are deliberately identical to the light ones they override. And **a dark rule
   belongs here, never back in app.css**, or a chosen light palette will pick up
   half of it. See src/Theme.php.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:#eef2ee; --sea:#bcd2d8; --sea-2:#9fc0c8;
  --sand:#141a1e; --paper:#1c2429; --line:#2c363c;
  --muted:#9aa5a3; --text:#e7ece9; --gold:#d8b46e; --gold-deep:#caa257;
  /* Dark mode needs no correction: the wash under the card is heavy enough
     that --muted measures 5.6:1 through the glass over any of the pictures. */
  --muted-glass: var(--muted);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 26px -10px rgba(0,0,0,.6);
  --shadow-lg:0 26px 64px -22px rgba(0,0,0,.7);
}

/* The browser's own furniture — scrollbars, form controls, the caret. app.css
   says `light dark`, which is the machine's call; every way this file gets
   loaded — the machine saying dark, „Éjszakai tenger", „Éjfél" — is already a
   dark page, so it can say so outright. */
:root { color-scheme: dark; }

/* Login: the picture becomes a lit texture rather than a lightbox. At full
   brightness a cream photograph behind a dark card is glare, and the point of
   the wash is that the fields stay the brightest thing on screen. */
.login-body.has-bg::before {
  background:
    linear-gradient(to bottom, rgba(20,26,30,.80), rgba(20,26,30,.66) 42%, rgba(20,26,30,.84)),
    var(--login-bg) center center / cover no-repeat;
}
.login-body.has-bg .login-card { box-shadow: 0 26px 64px -20px rgba(0,0,0,.6); }

/* …and the same wash on the settings page's miniature of it. */
.lbp-stage.has-bg::after {
  background: linear-gradient(to bottom, rgba(20,26,30,.80), rgba(20,26,30,.66) 42%, rgba(20,26,30,.84));
}

/* A status badge wears a colour the team picked in the settings
   (App\WeddingStatuses), so unlike the six fixed tones above it it cannot be
   tuned per palette — the same mid-tone that reads on sand is muddy on ink. The
   word therefore arrives already lightened far enough to pass AA on this ground
   (`--st-lit`, measured in PHP because CSS cannot ask), and the tint is deepened
   to keep the pill visible. The dot stays the colour as picked. */
.badge.is-status { color: var(--st-lit, var(--gold));
  background: color-mix(in srgb, var(--st, var(--gold)) 24%, transparent); }

/* „Feladatok" (migration 0054, doc/tasks.md) — the two red states.
 *
 * The card's warning tones are literal hex, like every other fixed tone in this
 * app: a deadline that has passed is not a palette decision. But `#8e2f26` is a
 * word chosen to read on cream, and on ink it is dark-on-dark — the pill loses
 * the only thing it is there for. So the word is lightened here and its tint
 * deepened, the treatment `.badge.is-status` above already gets.
 *
 * The row's own ground moves too: `color-mix(#b4453a 5%, var(--paper))` is a
 * blush on paper and invisible on ink, so the late row is given enough of the
 * colour to be findable while scrolling — which is the whole job of that rule.
 *
 * `.pay-state.is-overdue` on the payment card has the same light-only word and
 * is deliberately NOT changed here: it is a shipped surface, and repainting it
 * belongs to a change about that card rather than to this one. */
.task-state.is-overdue, .task-state.is-due_today {
  color: #ffb3a6; background: color-mix(in srgb, #b4453a 30%, transparent); }
.task-sum__n.is-overdue {
  color: #ffb3a6; background: color-mix(in srgb, #b4453a 30%, transparent); }
.task-row[data-state="overdue"] {
  border-color: color-mix(in srgb, #b4453a 60%, var(--line));
  background: color-mix(in srgb, #b4453a 12%, var(--paper)); }
.task-row[data-priority="high"] { box-shadow: inset 3px 0 0 #d4675a; }
.task-row.is-mine[data-priority="high"] {
  box-shadow: inset 3px 0 0 #d4675a, inset 6px 0 0 var(--gold-deep); }