/* The Company and legal pages in the dark: Privacy, Terms, Cookie Policy, Ad Disclosure, Accessibility,
 * Support, Delete account, Cookie settings, Careers, Campus ambassador, Contact, About and Partner with us.
 *
 * Loaded last on those pages only. Their head script sets data-theme before first paint: ?theme=
 * for review, then the saved site choice (tud_theme), then the device's prefers-color-scheme, else light.
 * The header button (app.js, #theme-toggle) saves tud_theme, so one choice carries across these pages.
 * The homepage shares the key (one choice for the whole site) but keeps its own file (home-dark.css); nothing here reaches it.
 *
 * The palette is the homepage's dark palette, unchanged (WCAG ratios):
 *   ground #1A1613  paper #241F1A  raised #2E2822  band #0F0C0A
 *   text #F6EFE4 (15.7:1 on the ground)  soft #CBBFB0 (9.9:1)  muted #B3A696 (6.8:1 on paper)
 *   links #FF8A5C (7.7:1 on the ground, 7.0:1 on paper)  orange #FF6B35 unchanged, ink text on it (6.5:1)
 * Tone cards take the homepage's deep tones (cream text 9.5:1 and up). Line doodles swap to their cream
 * drawing (#EAE0D0, 13:1 on the ground and 7:1 or more on every deep tone): both drawings ship and the
 * one for this theme shows (site.css .theme-art). The doodle on the orange Vision card stays ink.
 */

/* ---------- the header's theme button ----------
   The homepage's button: an outline circle like the menu, the moon in the light (go dark), the sun in the
   dark (go light). Desktop: just left of Sign in. Phone: just left of the menu, after Get verified. */
.ls .nav-theme { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--ls-ink); border-radius: 50%; color: var(--ls-ink); background: transparent; cursor: pointer; transition: background-color 160ms var(--ls-ease); }
.ls .nav-theme svg { display: block; }
.ls .nav-theme:hover { background: rgba(20, 20, 18, .05); }
.ls .nav-theme:focus-visible { outline: 3px solid var(--ls-ink); outline-offset: 2px; }
:root:not([data-theme="dark"]) .ls .nav-theme-sun, :root[data-theme="dark"] .ls .nav-theme-moon { display: none; }
@media (max-width: 600px) { .ls .nav-theme { order: 1; } .ls .nav-right .ls-menu { order: 2; } }
/* The partner pages carry the longer Apply to partner action beside the button and the menu. */
@media (max-width: 600px) { .ls .nav:has(.nav-merchant-cta) .nav-logo { width: 100px; } .ls .nav-right:has(.nav-merchant-cta) { gap: 6px; } .ls .nav-right .nav-merchant-cta.btn-sm { padding-inline: 14px; font-size: 14px; } }
@media (max-width: 374px) { .ls .nav:has(.nav-merchant-cta) .nav-logo { width: 84px; } .ls .nav-right .nav-merchant-cta.btn-sm { padding-inline: 12px; font-size: 13px; } }
@media (max-width: 380px) { .ls .nav-logo { width: 100px; } .ls .nav-right { gap: 6px; } .ls .nav-right .btn-sm { padding-inline: 12px; } }
/* The switch crossfades in 200ms (app.js, through a view transition); nothing moves under reduced motion. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { .ls .nav-theme { transition: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- tokens ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --site-accent-text: #FF8A5C;
  --site-control-border: #8C7F71;
  --tud-color-bg-canvas: #1A1613;
  --tud-color-bg-surface: #241F1A;
  --tud-color-bg-raised: #2E2822;
  --tud-color-bg-sunken: #15120F;
  --tud-color-bg-inverse: #F6EFE4;
  --tud-color-text-primary: #F6EFE4;
  --tud-color-text-secondary: #CBBFB0;
  --tud-color-text-muted: #B3A696;
  --tud-color-text-placeholder: #A39787;
  --tud-color-text-inverse: #1A1613;
  --tud-color-text-on-accent: #141412;
  --tud-color-accent-text-on-dark: #FF8A5C;
  --tud-color-accent-tint: #33231A;
  --tud-color-accent-tint-border: #5A3420;
  --tud-color-border-default: #352E27;
  --tud-color-border-strong: #443B32;
  --tud-color-border-focus: #FF8A5C;
  --tud-color-deal-panel-0: #5E4209;
  --tud-color-deal-panel-1: #42311F;
  --tud-color-deal-panel-2: #1F4038;
  --tud-color-deal-panel-3: #4D2A36;
  --tud-color-deal-panel-4: #31401F;
  --tud-color-deal-panel-5: #263A55;
  --tud-color-deal-panel-6: #3A2F52;
}
:root[data-theme="dark"] body.ls {
  --ls-ink: #F6EFE4;
  --ls-ink-2: #E6DDD0;
  --ls-soft: #CBBFB0;
  --ls-muted: #B3A696;
  --ls-canvas: #1A1613;
  --ls-paper: #241F1A;
  --ls-raised: #2E2822;
  --ls-band: #0F0C0A;
  --ls-line: #352E27;
  --ls-line-2: #443B32;
  --ls-control: #8C7F71;
  --ls-orange-deep: #FF7A47;
  --ls-accent-text: #FF8A5C;
  --ls-tint: #33231A;
  --ls-tint-line: #5A3420;
  --ls-chai: #5E4209;
  --ls-sand: #42311F;
  --ls-food: #1F4038;
  --ls-move: #4D2A36;
  --ls-study: #31401F;
  --ls-fashion: #263A55;
  --ls-lilac: #3A2F52;
  --ls-ok: #4CC97E;
  --ls-ok-bg: #12281A;
  --ls-wait: #FFB84D;
  --ls-wait-bg: #2A2010;
  --ls-shadow: 0 0 0 1px #443B32;
  --ls-lift: var(--tud-shadow-card);
  --site-accent-text: var(--ls-accent-text);
}

/* ---------- base ---------- */
/* Multiply would sink a cream drawing into the ground; the dark drawings are already cut out. */
:root[data-theme="dark"] .ls :is(.theme-art img, .lg-tile img, .sp-doodle img, .cb-hero-art img, .cb-well img) { mix-blend-mode: normal; }
:root[data-theme="dark"] .ls ::selection { color: #141412; background: #FF8A5C; }
:root[data-theme="dark"] .ls .nav-theme:hover { background: rgba(246, 239, 228, .08); }
/* The ink pill turns cream from the tokens, its words in the paper (14.1:1); only the hovers are fixed colours. */
:root[data-theme="dark"] .ls :is(.ls-btn--ink, .btn-primary):hover { background: #E2D8CA; border-color: #E2D8CA; }
:root[data-theme="dark"] .ls :is(.ls-btn--line, .btn-secondary):hover { background: rgba(246, 239, 228, .08); }

/* ---------- header and footer ---------- */
:root[data-theme="dark"] .ls .site-header { background: rgba(26, 22, 19, .92); border-bottom-color: #2E2822; }
:root[data-theme="dark"] .ls .nav-logo,
:root[data-theme="dark"] .ls .footer-landmark-image { object-position: -99999px 0; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; }
:root[data-theme="dark"] .ls .nav-logo { background-image: url('/assets/logo/theunideals-logo-color-dark.svg'); }
:root[data-theme="dark"] .ls .nav-pass-dot { box-shadow: 0 0 0 2px #1A1613; }
:root[data-theme="dark"] .ls .footer-landmark-image { filter: none; background-image: url('/assets/footer-svg/footer-landmark-1080-dark.webp'); }
@media (min-width: 760px) { :root[data-theme="dark"] .ls .footer-landmark-image { background-image: url('/assets/footer-svg/footer-landmark-dark.svg'); } }
:root[data-theme="dark"] .ls .footer-company a { color: #CBBFB0; }

/* ---------- Delete account: the permanence band ----------
   On the light page it is the one ink block; in the dark it stays the darkest thing, the band below the ground. */
:root[data-theme="dark"] .ls .da-band { background: var(--ls-band); color: #F6EFE4; box-shadow: inset 0 0 0 1px #443B32; }
:root[data-theme="dark"] .ls .da-band h2 { color: #F6EFE4; }

/* ---------- Careers ---------- */
/* The role stub's perforation and the building band's scallop are cut in the paper colour, so they follow it. */
:root[data-theme="dark"] .ls .cr-role:hover { border-color: #8C7F71; }

/* ---------- About ---------- */
/* The ticket rules are lighter shades of their tones on the dark (7:1 and up on the paper). */
:root[data-theme="dark"] .ab-ticket--teal { --ab-rule: #74D1B0; }
:root[data-theme="dark"] .ab-ticket--amber { --ab-rule: #EDBB52; }
/* The Vision card stays brand orange: its words stay ink (6.5:1), its doodle stays the ink drawing. */
:root[data-theme="dark"] .ab-statement--vision, :root[data-theme="dark"] .ab-statement--vision :is(h2, p) { color: #141412; }
:root[data-theme="dark"] .ab-statement--vision :focus-visible { outline-color: #141412; }

/* ---------- Contact ---------- */
/* The address underline lifts to the dark link orange (4.9:1 and up on every deep tone). */
:root[data-theme="dark"] .ct-address a { text-decoration-color: #FF8A5C; }