/* Theme toggle and dark theme.
   The palette lives in the first block; everything below maps the site's parts
   onto it. To try a different dark scheme, change only the --night-* values. */

/* Toggle button, beside Contact (both themes) */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.theme-toggle {
  --surface: var(--color-blue);
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--duration-s) var(--ease-out);
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  background-color: rgb(255 255 255 / 0.16);
}

.theme-toggle svg {
  grid-area: 1 / 1;
  width: 1.35rem;
  height: 1.35rem;
  transition: opacity var(--duration-m) var(--ease-out), transform var(--duration-m) var(--ease-out);
}

/* Shows the theme you'll switch to: a moon in light, a sun in dark */
.theme-toggle__sun,
[data-theme="dark"] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(-45deg) scale(0.6);
}

[data-theme="dark"] .theme-toggle__sun {
  opacity: 1;
  transform: none;
}

/* Dark theme palette ("Graphite night", blue accent) */

[data-theme="dark"] {
  --night-base: #0E0F12;
  --night-alt: #14151A;
  --night-raised: #1B1C22;
  --night-raised-high: #24252D;
  --night-text: #EEF0F4;
  --night-muted: #A8ACB8;
  --night-accent: #8197FF;
  --night-accent-press: #A6B5FF;
  --night-on-accent: #111216;
  --night-accent-tint: rgb(129 151 255 / 0.14);

  color-scheme: dark;
  --surface: var(--night-base);
  --surface-raised: var(--night-raised);
  --text: var(--night-text);
  --text-muted: var(--night-muted);
  --accent: var(--night-accent);
  --accent-press: var(--night-accent-press);
  --on-accent: var(--night-on-accent);
  --focus: var(--night-accent);
  --glass: rgb(24 25 30 / 0.72);
  --glass-shadow: 0 10px 40px rgb(0 0 0 / 0.45);
  --grid-line: rgb(238 240 244 / 0.08);
  --grid-ink: rgb(129 151 255 / 0.75);
  --grid-stamp: rgb(43 75 255 / 0.6);
}

[data-theme="dark"] body {
  background-color: var(--night-base);
  color: var(--night-text);
}

/* The sections that were dark in the light theme keep the rhythm with a second dark */
[data-theme="dark"] .section--dark {
  --surface: var(--night-alt);
  --surface-raised: var(--night-raised);
  --text: var(--night-text);
  --text-muted: var(--night-muted);
}

/* Header, grain and bottom menu */

[data-theme="dark"] .top-grain {
  opacity: 0.3;
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0));
}

[data-theme="dark"] .dock__link {
  --surface: var(--night-base);
  color: var(--night-text);
}

[data-theme="dark"] .dock__link:hover {
  background-color: var(--night-accent-tint);
}

[data-theme="dark"] .dock__link[aria-current="true"] {
  background-color: var(--color-blue);
  color: #FFFFFF;
}

[data-theme="dark"] .dock__link:active {
  background-color: var(--color-blue-press);
  color: #FFFFFF;
}

[data-theme="dark"] .to-top {
  --surface: var(--night-base);
  color: var(--night-text);
}

[data-theme="dark"] .to-top:hover,
[data-theme="dark"] .to-top:active {
  background-color: var(--color-blue);
  color: #FFFFFF;
}

/* Hero */

[data-theme="dark"] .hero__intro {
  --text-muted: var(--night-muted);
}

[data-theme="dark"] .hero__title .hero__phrase {
  color: var(--night-accent);
}

/* About */

[data-theme="dark"] .measure__part::before {
  background:
    linear-gradient(var(--night-accent), var(--night-accent)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--night-accent), var(--night-accent)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--night-accent), var(--night-accent)) 100% 0 / 1px 100% no-repeat;
}

[data-theme="dark"] .measure__label,
[data-theme="dark"] .more__toggle,
[data-theme="dark"] .stats__arrow {
  color: var(--night-accent);
}

[data-theme="dark"] .more__toggle::after {
  background-color: var(--night-accent-tint);
}

[data-theme="dark"] .more__toggle:hover::after {
  background-color: var(--night-accent);
  color: var(--night-on-accent);
}

[data-theme="dark"] .stats {
  --texture-line: rgb(238 240 244 / 0.07);
  --texture-grain-opacity: 0.5;
}

[data-theme="dark"] .stats::after {
  mix-blend-mode: normal;
  filter: invert(1);
}

[data-theme="dark"] .stats {
  background-color: var(--night-raised);
}

[data-theme="dark"] .stats__value {
  color: var(--night-text);
}

[data-theme="dark"] .stats__detail {
  color: var(--color-haze);
}

/* Services */

[data-theme="dark"] .direction__thumb {
  background-color: var(--night-raised-high);
}

[data-theme="dark"] .directions__note {
  background-color: var(--night-base);
}

/* Plan game */

[data-theme="dark"] .game {
  background-color: var(--night-raised);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}

[data-theme="dark"] .tray__label::before,
[data-theme="dark"] .tray--order .tray__list > li::before {
  color: var(--night-accent);
}

[data-theme="dark"] .game__help {
  background-color: #25262C;
  color: var(--night-text);
}

[data-theme="dark"] .chip {
  --surface: var(--night-raised);
  --focus: var(--night-accent);
  background-color: var(--night-raised-high);
  color: var(--night-text);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
}

[data-theme="dark"] .chip__detail {
  color: var(--night-muted);
}

/* Topic colours in the dark: deep tints for the cards, light tones for the swatches,
   and the textures drawn in dark so they still show on the lighter tones */
[data-theme="dark"] .chip--website,
[data-theme="dark"] .swatch--website {
  --tone: #B8F2D8;
  --tint: #173A2E;
  --shade: #172F28;
  --texture: repeating-linear-gradient(45deg, rgb(14 15 18 / 0.55) 0 1.5px, transparent 1.5px 5px);
}

[data-theme="dark"] .chip--brand,
[data-theme="dark"] .swatch--brand {
  --tone: #D9A2C6;
  --tint: #36242F;
  --shade: #2E2329;
  --texture: radial-gradient(rgb(14 15 18 / 0.6) 1px, transparent 1.4px) 0 0 / 5px 5px;
}

[data-theme="dark"] .chip--product,
[data-theme="dark"] .swatch--product {
  --tone: #93BAD6;
  --tint: #1F2C36;
  --shade: #1F272E;
  --texture:
    linear-gradient(rgb(14 15 18 / 0.55) 1px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(90deg, rgb(14 15 18 / 0.55) 1px, transparent 1px) 0 0 / 5px 5px;
}

[data-theme="dark"] .chip--print,
[data-theme="dark"] .swatch--print {
  --tone: #D9B65E;
  --tint: #362C17;
  --shade: #2E2819;
  --texture: repeating-linear-gradient(0deg, rgb(14 15 18 / 0.55) 0 1.5px, transparent 1.5px 5px);
}

[data-theme="dark"] .chip--shared {
  background-color: var(--night-raised-high);
}

[data-theme="dark"] .chip-remove {
  --surface: var(--night-raised);
  --focus: var(--night-accent);
  background-color: var(--night-text);
  color: var(--night-base);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.5);
}

[data-theme="dark"] .chip-remove:hover {
  background-color: var(--night-accent);
  color: var(--night-on-accent);
}

[data-theme="dark"] .legend {
  color: var(--night-text);
}

[data-theme="dark"] .legend__button {
  --focus: var(--night-accent);
  border-color: rgb(238 240 244 / 0.18);
  background-color: var(--night-raised);
}

[data-theme="dark"] .legend__button:hover {
  border-color: var(--night-accent);
  background-color: var(--night-raised-high);
}

[data-theme="dark"] .card.is-found::after {
  border-color: var(--color-blue);
}

[data-theme="dark"] .tray {
  --tray-minor: rgb(129 151 255 / 0.06);
  --tray-major: rgb(129 151 255 / 0.13);
  background-color: rgb(129 151 255 / 0.08);
}

[data-theme="dark"] .tray.is-target {
  background-color: rgb(129 151 255 / 0.18);
}

[data-theme="dark"] .tray__label {
  color: var(--night-text);
}

[data-theme="dark"] .tray__list > .tray__slot {
  background-color: rgb(129 151 255 / 0.25);
}

[data-theme="dark"] .chip.is-lifted,
[data-theme="dark"] .drag-ghost {
  box-shadow: 0 22px 48px rgb(0 0 0 / 0.55);
}

[data-theme="dark"] .message-card {
  --surface: var(--night-raised-high);
  --focus: var(--night-accent);
  background-color: var(--night-raised-high);
  color: var(--night-text);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.4);
}

[data-theme="dark"] .message-card__text {
  color: var(--night-text);
}

[data-theme="dark"] .message-card__text:hover {
  background-color: rgb(129 151 255 / 0.08);
}

[data-theme="dark"] .message-card__note {
  color: var(--night-muted);
}

/* Shared buttons */

[data-theme="dark"] .button--secondary {
  background-color: rgb(238 240 244 / 0.09);
}

[data-theme="dark"] .button--secondary:hover {
  background-color: rgb(238 240 244 / 0.15);
}

[data-theme="dark"] .button-quiet:hover {
  background-color: var(--night-accent-tint);
}

/* Policies and footer */

[data-theme="dark"] .policy__summary::after {
  background-color: var(--night-accent-tint);
  color: var(--night-accent);
}

[data-theme="dark"] .policy__summary:hover::after {
  background-color: var(--night-accent);
  color: var(--night-on-accent);
}



/* Values: the ink card becomes light blue so it stands out from the dark page */
[data-theme="dark"] .value--crafted {
  --value-bg: var(--night-accent);
  --value-ink: var(--color-ink);
  --value-focus: var(--night-text);
}

[data-theme="dark"] .value--clear {
  --value-focus: var(--night-text);
}

/* The ink card would vanish on the dark page, so it lifts to the raised grey */
[data-theme="dark"] .value--honest {
  --value-bg: var(--night-raised-high);
  --value-ink: var(--night-text);
  --value-focus: var(--night-accent);
}

/* Brand pattern behind the values cards: white on the dark page */
[data-theme="dark"] .values::after {
  background-image: url("../media/logo/tafidea-pattern-white.svg");
  opacity: 0.03;
}

[data-theme="dark"] .dock__list {
  box-shadow: var(--glass-shadow), 0 0 0 1px rgb(238 240 244 / 0.12);
}