:root {
  color-scheme: light;
  /* Paleta única por tema; todos os degradês de destaque derivam dela. */
  --gradient-start-rgb: 153 27 27;
  --gradient-middle-rgb: 185 28 28;
  --gradient-end-rgb: 198 40 40;
  --gradient-stops: rgb(var(--gradient-start-rgb)) 0%, rgb(var(--gradient-middle-rgb)) 48%, rgb(var(--gradient-end-rgb)) 100%;
  --gradient-brand: linear-gradient(105deg, var(--gradient-stops));
  --gradient-title: var(--gradient-brand);
  --gradient-action: var(--gradient-brand);
  --gradient-border: var(--gradient-brand);
  --gradient-soft: linear-gradient(105deg, rgb(var(--gradient-start-rgb) / .12) 0%, rgb(var(--gradient-middle-rgb) / .12) 48%, rgb(var(--gradient-end-rgb) / .12) 100%);
  --color-hover: #c62828;
  --color-hover-fill: #c62828;
  --color-on-hover: #ffffff;
  --color-hover-soft: rgb(198 40 40 / .08);
  --color-hover-shadow: rgb(198 40 40 / .20);
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-navigation-bg: #f0f0f0;
  --color-border: #dedede;
  --color-text: #202020;
  --color-text-muted: #626262;
  --color-placeholder-bg: #f2f2f2;
  --color-placeholder-border: #d4d4d4;
  --color-strong: #292929;
  --color-on-strong: #ffffff;
  --color-accent: #d4d4d4;
  --color-accent-hover: #bfbfbf;
  --color-on-accent: #202020;
  --ink-rgb: 32 32 32;
  --surface-rgb: 255 255 255;
  --header-glass: rgb(250 250 250 / .92);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --gradient-start-rgb: 255 85 85;
  --gradient-middle-rgb: 240 68 68;
  --gradient-end-rgb: 229 57 53;
  --color-hover: #ff6666;
  --color-hover-soft: rgb(255 102 102 / .10);
  --color-hover-shadow: rgb(255 102 102 / .20);
  --color-bg: #141414;
  --color-surface: #1e1e1e;
  --color-navigation-bg: #252525;
  --color-border: #3b3b3b;
  --color-text: #eeeeee;
  --color-text-muted: #b3b3b3;
  --color-placeholder-bg: #252525;
  --color-placeholder-border: #454545;
  --color-strong: #353535;
  --color-on-strong: #ffffff;
  --color-accent: #d4d4d4;
  --color-accent-hover: #eeeeee;
  --color-on-accent: #202020;
  --ink-rgb: 238 238 238;
  --surface-rgb: 30 30 30;
  --header-glass: rgb(20 20 20 / .92);
}

/* Troca de tema: cada elemento tem a própria transição de cor (.18s, .2s, .3s...), o que fazia
   umas partes mudarem antes das outras. Durante a troca elas ficam desligadas e tudo muda junto;
   a suavidade vem de um único esmaecimento da página inteira (View Transitions), quando houver. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
  transition: none !important;
}

/* O sol/lua do botão continua girando. */
:root.theme-switching .pl-theme-toggle svg {
  transition: opacity .35s, transform .35s !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .28s;
  animation-timing-function: ease;
}