/*
 * Contrato visual global da aplicação.
 *
 * Os componentes consomem tokens semânticos. As aliases no fim deste arquivo
 * mantêm compatibilidade com os nomes antigos enquanto cada tela é migrada.
 * Este arquivo deve ser carregado depois dos estilos específicos da página.
 */
:root,
:root[data-theme="verde"] {
  color-scheme: light;

  --theme-primary: #2e7d32;
  --theme-primary-strong: #236527;
  --theme-primary-dark: #174d24;
  --theme-primary-bright: #3b9140;
  --theme-on-primary: #ffffff;
  --theme-primary-soft: #e8f5e9;
  --theme-primary-pale: #f4faf4;

  --theme-accent: #78b83c;
  --theme-accent-strong: #579126;
  --theme-on-accent: #142018;

  --theme-canvas: #f7faf7;
  --theme-surface: #ffffff;
  --theme-surface-alt: #f1f6f2;
  --theme-text: #263238;
  --theme-text-soft: #5f6f64;
  --theme-text-muted: #748078;
  --theme-border: #dce5de;

  --theme-sidebar: #173d2a;
  --theme-sidebar-border: #28583e;
  --theme-sidebar-surface: #214b35;
  --theme-sidebar-surface-border: #35634a;
  --theme-sidebar-text: #f4faf6;
  --theme-sidebar-muted: #bfd0c4;
  --theme-sidebar-link: #a9ddb5;
  --theme-sidebar-avatar: #3b9140;
  --theme-sidebar-scrollbar: #547763;
  --theme-nav-active-bg: #2e7d32;
  --theme-nav-active-text: #ffffff;
  --theme-nav-hover-bg: #24543a;
  --theme-nav-hover-text: #ffffff;
  --theme-focus: #1769aa;
  --theme-shadow-color: 34 72 42;
}

:root[data-theme="azul"] {
  --theme-primary: #2467a7;
  --theme-primary-strong: #1d578d;
  --theme-primary-dark: #173f68;
  --theme-primary-bright: #347dbf;
  --theme-on-primary: #ffffff;
  --theme-primary-soft: #e6f0fa;
  --theme-primary-pale: #f3f8fd;

  --theme-accent: #238db5;
  --theme-accent-strong: #197390;
  --theme-on-accent: #ffffff;

  --theme-canvas: #f4f8fc;
  --theme-surface: #ffffff;
  --theme-surface-alt: #edf4fa;
  --theme-text: #18324b;
  --theme-text-soft: #52697d;
  --theme-text-muted: #718496;
  --theme-border: #d8e4ee;

  --theme-sidebar: #173f68;
  --theme-sidebar-border: #295c89;
  --theme-sidebar-surface: #204e78;
  --theme-sidebar-surface-border: #356b98;
  --theme-sidebar-text: #f4f8fc;
  --theme-sidebar-muted: #c0d0de;
  --theme-sidebar-link: #9bc9ef;
  --theme-sidebar-avatar: #347dbf;
  --theme-sidebar-scrollbar: #53799a;
  --theme-nav-active-bg: #2467a7;
  --theme-nav-active-text: #ffffff;
  --theme-nav-hover-bg: #204e78;
  --theme-nav-hover-text: #ffffff;
  --theme-focus: #8b4cc4;
  --theme-shadow-color: 29 70 108;
}

:root[data-theme="monocromatico"] {
  --theme-primary: #2b2d2f;
  --theme-primary-strong: #17191b;
  --theme-primary-dark: #0d0e0f;
  --theme-primary-bright: #45494c;
  --theme-on-primary: #ffffff;
  --theme-primary-soft: #e8e9ea;
  --theme-primary-pale: #f5f5f5;

  --theme-accent: #555a5e;
  --theme-accent-strong: #383c3f;
  --theme-on-accent: #ffffff;

  --theme-canvas: #f5f5f5;
  --theme-surface: #ffffff;
  --theme-surface-alt: #eeeeee;
  --theme-text: #17191b;
  --theme-text-soft: #555a5e;
  --theme-text-muted: #74787b;
  --theme-border: #d9dadd;

  --theme-sidebar: #17191b;
  --theme-sidebar-border: #303337;
  --theme-sidebar-surface: #232629;
  --theme-sidebar-surface-border: #393d41;
  --theme-sidebar-text: #ffffff;
  --theme-sidebar-muted: #bcc0c3;
  --theme-sidebar-link: #e8e9ea;
  --theme-sidebar-avatar: #45494c;
  --theme-sidebar-scrollbar: #555a5e;
  --theme-nav-active-bg: #45494c;
  --theme-nav-active-text: #ffffff;
  --theme-nav-hover-bg: #2b2e31;
  --theme-nav-hover-text: #ffffff;
  --theme-focus: #2d68b2;
  --theme-shadow-color: 30 31 32;
}

:root[data-theme="amarelo"] {
  --theme-primary: #34383a;
  --theme-primary-strong: #292d2f;
  --theme-primary-dark: #202426;
  --theme-primary-bright: #4a4f52;
  --theme-on-primary: #ffffff;
  --theme-primary-soft: #ecece8;
  --theme-primary-pale: #f5f5f1;

  --theme-accent: #d2aa00;
  --theme-accent-strong: #aa8900;
  --theme-on-accent: #202426;

  --theme-canvas: #f1f1ee;
  --theme-surface: #ffffff;
  --theme-surface-alt: #e8e8e3;
  --theme-text: #202426;
  --theme-text-soft: #5d6264;
  --theme-text-muted: #777c7e;
  --theme-border: #d8d9d5;

  --theme-sidebar: #2d3133;
  --theme-sidebar-border: #454a4d;
  --theme-sidebar-surface: #383d3f;
  --theme-sidebar-surface-border: #4a5053;
  --theme-sidebar-text: #f7f7f3;
  --theme-sidebar-muted: #c9cecf;
  --theme-sidebar-link: #f0ca2f;
  --theme-sidebar-avatar: #d2aa00;
  --theme-sidebar-scrollbar: #5d6366;
  --theme-nav-active-bg: #d2aa00;
  --theme-nav-active-text: #202426;
  --theme-nav-hover-bg: #454a4d;
  --theme-nav-hover-text: #f0ca2f;
  --theme-focus: #b89200;
  --theme-shadow-color: 32 36 38;
}

/* Aliases para as famílias de variáveis já usadas nas telas públicas. */
:root {
  --color-primary: var(--theme-primary);
  --color-primary-strong: var(--theme-primary-strong);
  --color-primary-dark: var(--theme-primary-dark);
  --color-primary-soft: var(--theme-primary-soft);
  --color-primary-pale: var(--theme-primary-pale);
  --color-accent: var(--theme-accent);
  --color-accent-strong: var(--theme-accent-strong);
  --color-background: var(--theme-canvas);
  --color-surface: var(--theme-surface);
  --color-surface-alt: var(--theme-surface-alt);
  --color-text: var(--theme-text);
  --color-text-soft: var(--theme-text-soft);
  --color-text-muted: var(--theme-text-muted);
  --color-border: var(--theme-border);
  --color-white: var(--theme-on-primary);

  --green-primary: var(--theme-primary);
  --green-dark: var(--theme-primary-strong);
  --green-deep: var(--theme-primary-dark);
  --green-main: var(--theme-primary);
  --green-accent: var(--theme-primary-bright);
  --green-muted: var(--theme-accent);
  --green-light: var(--theme-primary-soft);
  --green-soft: var(--theme-primary-pale);

  --green-900: var(--theme-primary-dark);
  --green-800: var(--theme-primary-strong);
  --green-700: var(--theme-primary);
  --green-600: var(--theme-primary-bright);
  --green-500: var(--theme-primary-bright);
  --green-300: var(--theme-accent);
  --green-200: var(--theme-border);
  --green-100: var(--theme-primary-soft);
  --green-50: var(--theme-primary-pale);

  --background: var(--theme-canvas);
  --background-page: var(--theme-canvas);
  --card: var(--theme-surface);
  --white: var(--theme-surface);
  --text: var(--theme-text);
  --text-primary: var(--theme-text);
  --text-secondary: var(--theme-text-soft);
  --text-dark: var(--theme-text);
  --text-soft: var(--theme-text-soft);
  --text-muted: var(--theme-text-muted);
  --text-light: var(--theme-text-muted);
  --border: var(--theme-border);
  --border-color: var(--theme-border);
  --border-soft: var(--theme-border);

  --gray-50: var(--theme-primary-pale);
  --gray-100: var(--theme-surface-alt);
  --gray-200: var(--theme-border);
  --gray-300: var(--theme-border);
  --gray-500: var(--theme-text-muted);
  --gray-600: var(--theme-text-soft);
  --gray-800: var(--theme-text);
  --gray-900: var(--theme-text);

  --admin-sidebar-bg: var(--theme-sidebar);
  --admin-sidebar-border: var(--theme-sidebar-border);
  --admin-sidebar-card-border: var(--theme-sidebar-surface-border);
  --admin-sidebar-scrollbar: var(--theme-sidebar-scrollbar);
  --admin-green: var(--theme-sidebar-link);
  --admin-green-dark: var(--theme-sidebar-link);
  --admin-green-avatar: var(--theme-sidebar-avatar);
  --admin-green-soft: var(--theme-nav-hover-bg);
  --admin-gray: var(--theme-sidebar-muted);
  --admin-white: var(--theme-sidebar-surface);
}

/* O header declara tokens localmente; esta regra posterior conecta-o ao tema. */
.site-header {
  --header-green: var(--theme-primary);
  --header-green-dark: var(--theme-primary-strong);
  --header-green-light: var(--theme-primary-bright);
  --header-action-bg: var(--theme-accent);
  --header-action-hover-bg: var(--theme-accent-strong);
  --header-action-text: var(--theme-on-accent);
  --header-white: var(--theme-on-primary);
  --header-text-dark: var(--theme-text);
  --header-border: var(--theme-border);
  --header-soft: var(--theme-primary-pale);
  --header-shadow: 0 4px 18px rgb(var(--theme-shadow-color) / 18%);
}

body {
  background-color: var(--theme-canvas);
  color: var(--theme-text);
  accent-color: var(--theme-primary);
}

::selection {
  background: var(--theme-primary-soft);
  color: var(--theme-primary-dark);
}

:where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--theme-focus);
}

.admin-sidebar {
  background: var(--theme-sidebar);
  border-color: var(--theme-sidebar-border);
  color: var(--theme-sidebar-text);
}

/* Ajustes compartilhados pelas imagens configuradas na identidade visual. */
.brand-image {
  --brand-image-scale: 1;
  transform: scale(var(--brand-image-scale));
  transform-origin: center;
}

.brand-image--compact {
  --brand-image-scale: 0.82;
}

.brand-image--large {
  --brand-image-scale: 1.12;
}

.brand-image[data-brand-effect="soft-shadow"] {
  filter: drop-shadow(0 8px 12px rgb(var(--theme-shadow-color) / 24%));
}

.brand-image[data-brand-effect="monochrome"] {
  filter: grayscale(1);
}

/* A identidade das telas de acesso acompanha a paleta escolhida. */
.login-page .brand-panel {
  background:
    radial-gradient(
      circle at 20% 15%,
      rgb(255 255 255 / 10%),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      var(--theme-primary) 0%,
      var(--theme-primary-strong) 52%,
      var(--theme-primary-dark) 100%
    );
}

/* Pontos ainda codificados diretamente na tela de detalhes da obra. */
.book-section {
  background: var(--theme-surface-alt);
}

.book-section::before {
  background: var(--theme-primary-dark);
}

@media (prefers-reduced-motion: no-preference) {
  body,
  .navbar,
  .admin-sidebar,
  .brand-panel {
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease;
  }
}