/*
  Dark theme.

  This file used to re-specify ~78 component rules, because the palette was
  built the wrong way round: the "dark" background was #b2b3b6 — a mid grey —
  with dark navy text on top, so it wasn't a dark theme at all, it was a dimmed
  light one. Every component then needed a patch to survive it.

  Now it re-points the semantic tokens instead, and the components follow on
  their own. What's left below are the genuine exceptions: things that must NOT
  simply invert.

  The palette is warm rather than neutral-grey — the brand is terracotta and
  the footer was already a warm near-black, so a cool grey dark mode would have
  fought both. Every text token below clears 4.5:1 against --color-page.
*/

body.dark-mode {
  /*
    Tells the browser to render form controls, scrollbars, and the caret in
    their dark variants. Without it the text inputs keep light-mode chrome and
    the scrollbar stays a bright strip down the side of a dark page.
  */
  color-scheme: dark;

  /*
    Brand. #C8503C only manages ~4.1:1 on a near-black ground, so the accent
    lightens here. That flips what has to sit *on* a brand fill: white on the
    lightened terracotta would be ~2.9:1, so --color-on-brand goes dark and
    lands at ~7:1 instead. This is the pair that makes buttons and pills work
    in both themes without either one being restyled.
  */
  --color-brand: #E9866D;
  --color-brand-rgb: 233, 134, 109;
  --color-brand-hover: #F29A83;
  --color-on-brand: #2A1512;

  /*
    Surfaces, lightest-on-darkest. Elevation reads through surface lightness
    rather than shadow, because a black shadow does almost nothing against a
    near-black page.
  */
  --color-page: #141110;
  --color-surface: #1E1A18;
  --color-surface-rgb: 30, 26, 24;
  --color-surface-hover: #2A2523;
  --color-project-image-bg: #1A1614;

  /*
    The timeline disc drops to the page color here, which looks like the wrong
    token until you open the artwork: the *_dark company logos are opaque PNGs
    with a near-black ground baked in (~#151412), not marks on transparency.
    On a --color-surface disc that ground reads as a dark square with corners
    poking out inside the circle. At --color-page it disappears, and the disc
    is defined by its terracotta border instead of by a fill.
  */
  --color-timeline-logo-bg: var(--color-page);

  /* Warm off-whites, stepped down in weight rather than jumping to grey. */
  --color-text-strong: #FFFBF7;
  --color-heading: #F7F1EC;
  --color-body: #D6CCC4;
  --color-text-secondary: #BCB1A8;
  --color-text-muted: #A79C93;
  --color-text-faint: #9C9188;
  /* Measured against --color-surface, not --color-page: everything using this
     (input placeholders, the history row labels) sits on a raised surface, and
     that's the tighter of the two comparisons. */
  --color-text-faint-2: #8E837A;

  /* Ink inverts; the divider drops to a whisper because a light rule at the
     old 0.6 alpha would cut the page in half. */
  --color-border: #332D2A;
  --color-border-strong: #4A423D;
  --color-hairline-rgb: 247, 241, 236;
  --divider-alpha: 0.22;

  /* The bright edge on translucent chrome is light catching a rim — it stays
     light, but at a fraction of the light-mode strength or it reads as a
     drawn white line. */
  --material-edge-alpha: 0.1;

  --color-error: #F2837A;
  --color-error-rgb: 242, 131, 122;
  --color-success: #5FD68A;

  --color-toggle-envelope-bg: #241E1B;

  /* Toggle. The thumb is parked on the right here, so the roles invert: the
     moon is the one sitting on the thumb and the sun is on the bare track. */
  --color-toggle-track: #2A2523;
  --color-toggle-thumb: #F7F1EC;
  /* on the dark track, at 0.75 - 5.8:1 */
  --color-toggle-sun: #F5C24D;
  /* on the cream thumb - 11.2:1 */
  --color-toggle-moon: #3A322E;
  --toggle-sun-opacity: 0.75;
  --toggle-moon-opacity: 1;

  /* The footer is a dark surface in both themes; here it drops a step below
     the page so it still reads as a distinct band. */
  --color-footer-bg: #100F0D;

  /*
    The hero glow carries further on a near-black ground than on white, so it
    needs more alpha to be visible at all — but the secondary tone drops to a
    deeper amber, because the light blush reads as washed-out pink down here.
  */
  --hero-glow-alpha-base: 0.24;
  --color-glow-secondary-rgb: 226, 146, 104;
}

/* --- Genuine exceptions ------------------------------------------------- */

/*
  The logo's inner disc is a hole punched through the terracotta mark, not a
  cream-colored shape — so it tracks the page behind it rather than staying
  cream.
*/
body.dark-mode .logo-inner {
  fill: var(--color-page);
}

/* The one part of the toggle that isn't a colour: which end the thumb parks
   at. Everything else about it is themed through the tokens above. */
body.dark-mode .toggle-thumb {
  transform: translateX(34px);
}

/* Re-stated for dark mode: the nav's generic link color matches the
   light-mode `[aria-current]` rule on specificity and would otherwise win on
   order, quietly dropping the "you are here" marker. */
body.dark-mode header nav ul li a[aria-current="true"] {
  color: var(--color-brand);
  background-color: rgba(var(--color-brand-rgb), 0.16);
}

body.dark-mode header nav ul li a[aria-current="true"]:hover,
body.dark-mode header nav ul li a[aria-current="true"].is-pressed {
  color: var(--color-brand);
  background-color: rgba(var(--color-brand-rgb), 0.26);
}