/* =========================================================
   Temas de cores (seletor flutuante no canto inferior esquerdo)
   Cada tema só redefine as variáveis de :root em style.css.
   O tema padrão ("organic") é o próprio :root.
   Contraste conferido: botões e títulos >= 4,5:1 (WCAG AA).
   ========================================================= */

/* Petróleo — azul-petróleo e verde, inspirado na paleta da Timbira (PostgreSQL) */
:root[data-theme="petroleo"] {
  --c-dark: #004967;   --c-dark-rgb: 0, 73, 103;
  --c-accent: #4ec248; --c-accent-rgb: 78, 194, 72;
  --c-ink: #00618a;    --c-ink-rgb: 0, 97, 138;
  --c-soft: #e2eef3;
  --c-hl: #5ccf56;     --c-hl-soft: #e3f5e2; --c-hl-ink: #2a7a26;
  --c-bg: #f2f8fa;     --c-bg2: #f8fbfc;
  --c-text: #4a5d66;   --c-muted: #5a6e78;   --c-border: #dde8ec;
  --c-on-dark: #d6e6ec; --c-on-dark-muted: #9fbcc8;
}

/* Oceano — azul-marinho e laranja */
:root[data-theme="oceano"] {
  --c-dark: #0b2545;   --c-dark-rgb: 11, 37, 69;
  --c-accent: #2f80d1; --c-accent-rgb: 47, 128, 209;
  --c-ink: #1d5fa8;    --c-ink-rgb: 29, 95, 168;
  --c-soft: #e6f0fa;
  --c-hl: #ff8c42;     --c-hl-soft: #ffe9d9; --c-hl-ink: #a34a0c;
  --c-bg: #f4f8fc;     --c-bg2: #f9fbfd;
  --c-text: #4d5b6c;   --c-muted: #5d6d81;   --c-border: #e1e8f0;
  --c-on-dark: #d5deea; --c-on-dark-muted: #9fb0c6;
}

/* Terracota — marrom e terracota */
:root[data-theme="terracota"] {
  --c-dark: #3d2b1f;   --c-dark-rgb: 61, 43, 31;
  --c-accent: #d07a4f; --c-accent-rgb: 208, 122, 79;
  --c-ink: #a64b2a;    --c-ink-rgb: 166, 75, 42;
  --c-soft: #f6e6dc;
  --c-hl: #e9b44c;     --c-hl-soft: #f9ecd0; --c-hl-ink: #7a5a10;
  --c-bg: #fbf5ee;     --c-bg2: #fdf9f4;
  --c-text: #65564b;   --c-muted: #75685d;   --c-border: #efe3d6;
  --c-on-dark: #eadfd5; --c-on-dark-muted: #c2b0a2;
}

/* Ardósia — grafite e verde-água */
:root[data-theme="ardosia"] {
  --c-dark: #1e293b;   --c-dark-rgb: 30, 41, 59;
  --c-accent: #14b8a6; --c-accent-rgb: 20, 184, 166;
  --c-ink: #0f766e;    --c-ink-rgb: 15, 118, 110;
  --c-soft: #e0f4f1;
  --c-hl: #fbbf24;     --c-hl-soft: #fdf0c8; --c-hl-ink: #8a6100;
  --c-bg: #f5f7f9;     --c-bg2: #fafbfc;
  --c-text: #4b5563;   --c-muted: #667080;   --c-border: #e3e7ec;
  --c-on-dark: #dbe2ea; --c-on-dark-muted: #a3afbf;
}

/* Ameixa — roxo e rosa */
:root[data-theme="ameixa"] {
  --c-dark: #2e1a47;   --c-dark-rgb: 46, 26, 71;
  --c-accent: #9b6dd6; --c-accent-rgb: 155, 109, 214;
  --c-ink: #6b3fa0;    --c-ink-rgb: 107, 63, 160;
  --c-soft: #efe6f8;
  --c-hl: #f48fb1;     --c-hl-soft: #fde4ee; --c-hl-ink: #a3275a;
  --c-bg: #faf6fc;     --c-bg2: #fcfafd;
  --c-text: #5c5268;   --c-muted: #70667d;   --c-border: #ece4f2;
  --c-on-dark: #e4dcef; --c-on-dark-muted: #b8a9cc;
}

/* Nos temas que não são o padrão, a foto do topo e a da chamada final
   recebem o mesmo duotom das demais imagens, para combinar com as cores. */
:root[data-theme]:not([data-theme="organic"]) .duo-theme { background: var(--c-bg); isolation: isolate; position: relative; }
:root[data-theme]:not([data-theme="organic"]) .duo-theme img { filter: grayscale(1) brightness(1.12); mix-blend-mode: multiply; }
:root[data-theme]:not([data-theme="organic"]) .duo-theme::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--c-accent); mix-blend-mode: color; opacity: .4;
}
:root[data-theme]:not([data-theme="organic"]) .duo-theme::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--c-dark); mix-blend-mode: lighten;
}
:root[data-theme]:not([data-theme="organic"]) .cta-img { filter: grayscale(1) contrast(1.05); opacity: .55; }