/*
 * Dois temas oficiais = combinação controlada de:
 * (1) fundo da área principal + corpo (base.css --app-body-bg)
 * (2) superfície principal / hero / cards estruturais em páginas featured
 * (3) contraste de texto quando a superfície for escura
 *
 * IDs oficiais: dark | light
 * Temas canônicos: light e dark.
 * Sidebar (--sidebar-*): ajustada por tema oficial.
 * Variáveis --theme-*: usar nas superfícies semânticas da aplicação.
 * --app-hero-stage-start / --app-hero-stage-end / --app-hero-stage-bg: definidos por tema.
 */

:root {
  /* --------------------------------------------------------------------------
     Tokens semanticos globais (default: light)
     -------------------------------------------------------------------------- */
  --color-shell: var(--color-bg);
  --color-card: var(--color-surface);
  --color-card-soft: var(--color-surface-soft);
  --color-card-muted: var(--color-surface-soft);
  --color-panel: var(--color-surface);
  --color-panel-strong: var(--color-surface-strong);
  --color-text-muted: var(--color-muted);
  --color-text-soft: var(--color-subtle);
  --color-heading-soft: var(--color-text-muted);
  --color-section-title: var(--color-heading);
  --color-card-title: var(--color-heading);
  --color-label: var(--color-muted-strong);
  --color-label-strong: var(--color-heading);
  --color-help: var(--color-subtle);
  --color-description: var(--color-help);
  --color-icon: var(--color-label);
  --color-icon-muted: var(--color-help);
  --color-icon-strong: var(--color-heading);
  --color-danger-bg: var(--color-danger-soft);
  --color-danger-text: var(--color-danger);
  --color-info-bg: var(--color-info-soft);
  --color-info-border: rgba(21, 91, 154, 0.24);
  --color-info-text: var(--color-primary);
  --shadow-card: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --color-surface-strong: var(--color-surface-muted);
  --color-input-bg: var(--color-surface-soft);
  --color-input-disabled-bg: var(--color-surface-muted);
  --color-input-bg-disabled: var(--color-input-disabled-bg);
  --color-input-text: var(--color-text);
  --color-input-placeholder: var(--color-text-soft);
  --color-input-disabled-text: var(--color-text-muted);
  --color-input-border: var(--color-border);
  --color-primary-dark: var(--color-primary-strong);

  /* Aliases estáveis (tokens.css) — não dependem do tema visual featured */
  --color-bg-app: var(--color-bg);
  --color-bg-content: var(--color-bg);
  --color-bg-card: var(--color-surface);
  --color-bg-card-soft: var(--color-surface-muted);
  --color-text-primary: var(--color-text);
  --color-text-secondary: var(--color-muted);
  --color-text-muted: var(--color-muted);
  --color-border-ui: var(--color-border);
  --color-border-ui-soft: var(--color-border-soft);
  --theme-surface-card: var(--color-card);
  --theme-border-card: var(--color-border);

  /* Sidebar institucional (fallback) */
  --sidebar-surface: linear-gradient(180deg, #062847 0%, #031c33 100%);
  --sidebar-fg: #d4dde9;
  --sidebar-fg-soft: #cddcf0;
  --sidebar-fg-heading: #f7fbff;
  --sidebar-border: rgba(175, 192, 211, 0.24);
  --sidebar-shadow: inset -1px 0 0 rgba(175, 192, 211, 0.2), 12px 0 28px rgba(2, 8, 23, 0.34);
  --sidebar-brand-fg: #f7fbff;
  --sidebar-badge-bg: linear-gradient(140deg, rgba(216, 162, 27, 0.62), rgba(185, 135, 18, 0.72));
  --sidebar-link-surface: rgba(255, 255, 255, 0.06);
  --sidebar-link-border: rgba(175, 192, 211, 0.22);
  --sidebar-link-fg: #cddcf0;
  --sidebar-link-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-icon-bg: rgba(216, 162, 27, 0.18);
  --sidebar-icon-fg: #deebfb;
  --sidebar-active-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-fg: var(--color-white);
  --sidebar-active-border: rgba(216, 162, 27, 0.45);
  --sidebar-panel-border: rgba(216, 162, 27, 0.35);
  --sidebar-footer-fg: rgba(205, 226, 249, 0.84);
  --sidebar-logout-bg: rgba(4, 24, 46, 0.55);
  --sidebar-logout-border: rgba(175, 192, 211, 0.35);
  --sidebar-logout-fg: rgba(230, 241, 255, 0.95);
  --sidebar-focus-ring: rgba(216, 162, 27, 0.35);

  /* Fallback antes do JS (equivalente a light) */
  --app-body-bg: linear-gradient(180deg, #ffffff 0%, #e3eaf2 48%, #e3eaf2 100%);
  --app-main-bg: transparent;
  --app-featured-bg-fallback: #b9cbe0;
  --app-featured-bg:
    radial-gradient(ellipse 110% 78% at 0% 0%, rgba(216, 162, 27, 0.16), transparent 50%),
    radial-gradient(ellipse 82% 62% at 100% 6%, rgba(21, 91, 154, 0.16), transparent 48%),
    radial-gradient(ellipse 70% 48% at 50% 108%, rgba(11, 58, 102, 0.12), transparent 56%),
    linear-gradient(168deg, #ffffff 0%, #e3eaf2 26%, #d4dde9 62%, #cddcf0 100%);

  /* Faixa superior do hero (.app-page-hero__stage) */
  --app-hero-stage-start: #132238;
  --app-hero-stage-end: #17476f;
  --app-hero-stage-bg: linear-gradient(315deg, var(--app-hero-stage-start) -25%, var(--app-hero-stage-end) 25%);
  --app-hero-eyebrow: rgba(255, 248, 230, 0.98);
  --app-hero-title: var(--color-white);
  --app-hero-body-bg: linear-gradient(180deg, var(--color-white) 0%, #ffffff 100%);
  --app-hero-ribbon: linear-gradient(
    90deg,
    rgba(216, 162, 27, 0.88) 0%,
    rgba(190, 145, 45, 0.5) 42%,
    rgba(45, 95, 145, 0.85) 100%
  );

  /* Superfície / texto featured (default = div clara) */
  --theme-surface-card: var(--color-white);
  --theme-surface-card-soft: #ffffff;
  --theme-border-card: #e3eaf2;
  --theme-text-heading: #071a33;
  --theme-text-body: #132238;
  --theme-text-muted: #52657a;
  --theme-text-subtle: #71839a;
  --theme-text-muted-strong: #334c63;
  --theme-accent-eyebrow: #d8a21b;
  --theme-stat-value: #0b3a66;
  --theme-accent-line: linear-gradient(
    90deg,
    rgba(216, 162, 27, 0.92) 0%,
    rgba(200, 150, 40, 0.55) 42%,
    rgba(11, 58, 102, 0.88) 100%
  );
  --theme-card-inset: 0 1px 0 rgba(255, 255, 255, 0.08);
  --theme-shadow-hero: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 12px rgba(7, 26, 51, 0.07), var(--shadow-lg);
  --theme-shadow-block: 0 1px 0 rgba(255, 255, 255, 0.06) inset, var(--shadow-md);
  --theme-shadow-stat: 0 1px 0 rgba(255, 255, 255, 0.05) inset, var(--shadow-sm);
  --theme-input-bg: var(--color-white);
  --theme-input-border: rgba(31, 76, 125, 0.22);
  --theme-input-text: #132238;
  --theme-list-row-hover: var(--color-primary-soft);
  --theme-list-border: rgba(203, 216, 230, 0.85);
  --theme-btn-secondary-bg: #ffffff;
  --theme-btn-secondary-border: #afc0d3;
  --theme-btn-secondary-text: var(--color-primary);
  --theme-btn-secondary-hover-bg: var(--color-secondary-soft);
  --theme-btn-secondary-hover-border: var(--color-secondary);
  --theme-btn-muted-bg: #f0f6ff;
  --theme-btn-muted-border: #9eb7d2;
  --theme-btn-muted-text: var(--color-primary);
  --theme-btn-muted-hover-bg: #deebfb;
  --theme-btn-muted-hover-border: #7e9ebf;
  --theme-form-section-bg: #ffffff;
  --theme-form-section-border: #d4dde9;
  --theme-empty-bg: #ffffff;
  --theme-empty-border: #8ca6bf;
  --theme-quick-icon-bg: linear-gradient(165deg, #fff6dc, #fffaeb);
  --theme-quick-icon-border: #d8a21b;
  --theme-quick-icon-fg: #0b3a66;
  --theme-badge-accent-bg: var(--color-accent-soft);
  --theme-badge-accent-border: #d8a21b;
  --theme-badge-accent-text: var(--color-accent-hover);
  --color-accent-border-soft: rgba(216, 162, 27, 0.35);
  --color-accent-border-strong: rgba(216, 162, 27, 0.45);
  --color-danger-border-soft: rgba(180, 35, 24, 0.24);
  --color-danger-border-strong: rgba(180, 35, 24, 0.38);
  --color-info-border-strong: rgba(21, 91, 154, 0.48);
  --color-success-border-soft: rgba(22, 128, 90, 0.28);
  --sidebar-theme-active-bg: #2b3f52;

  --route-card-bg: #ffffff;
  --route-card-border: #e3eaf2;
  --route-card-inner-bg: #ffffff;
  --route-card-inner-border: #d4dde9;
  --route-form-shell-bg: var(--route-card-bg);
  --route-section-bg: var(--route-card-bg);
  --route-section-soft-bg: var(--route-card-bg);
  --route-section-border: #e3eaf2;
  --route-reference-top-bg: linear-gradient(180deg, #17476f 0%, #0b3a66 100%);
  --route-field-bg: var(--color-card);
  --route-field-border: #b9cbe0;
  --route-field-text: #132238;
  --route-field-placeholder: #71839a;
  --route-card-text: #132238;
  --route-field-disabled-bg: #e3eaf2;
  --route-field-disabled-text: #5d768e;
  --route-button-primary-bg: linear-gradient(180deg, #12507f 0%, #0b3a66 100%);
  --route-button-primary-border: #0b3a66;
  --route-button-primary-text: #ffffff;
  --route-button-primary-hover-bg: linear-gradient(180deg, #12507f 0%, #082f55 100%);
  --route-button-primary-hover-border: #082f55;
  --route-button-secondary-bg: #f7fbff;
  --route-button-secondary-border: #b9cbe0;
  --route-button-secondary-text: #0b3a66;
  --route-button-secondary-hover-bg: #e3eaf2;
  --route-button-secondary-hover-border: #8fb1d0;
  --route-button-danger-bg: linear-gradient(180deg, #c93636 0%, #a92222 100%);
  --route-button-danger-border: #951f18;
  --route-button-danger-text: #ffffff;
  --route-button-danger-hover-bg: linear-gradient(180deg, #b72f27 0%, #951f18 100%);
  --route-button-danger-hover-border: #7a1a14;
  --route-status-draft-bg: #fff3cf;
  --route-status-draft-border: #d8a21b;
  --route-status-draft-text: #704800;
  --route-status-final-bg: #e5f6ef;
  --route-status-final-border: #16805a;
  --route-status-final-text: #07583c;
  --route-status-muted-bg: #e3eaf2;
  --route-status-muted-border: #b9cbe0;
  --route-status-muted-text: #334c63;
  --route-focus-ring: rgba(21, 91, 154, 0.18);

  /* --------------------------------------------------------------------------
     API publica de cor do design system — tokens --app-* (light default)
     Alias estaveis que componentes devem consumir em vez de --color-* diretos.
     -------------------------------------------------------------------------- */
  --app-bg: var(--color-bg);
  --app-surface: var(--color-surface);
  --app-surface-muted: var(--color-surface-muted);
  --app-surface-elevated: var(--color-card);
  --app-border: var(--color-border);
  --app-border-strong: var(--color-border-strong);
  --app-text: var(--color-text);
  --app-text-muted: var(--color-text-muted);
  --app-text-soft: var(--color-text-soft);
  --app-primary: var(--color-primary);
  --app-primary-hover: var(--color-primary-hover);
  --app-primary-soft: var(--color-primary-soft);
  --app-danger: var(--color-danger);
  --app-warning: var(--color-warning);
  --app-success: var(--color-success);
}

/* ========== 2 tema escuro oficial (inclui aliases legados escuros) ========== */
html[data-theme="dark"] {
  --color-bg: #0d1725;
  --color-shell: #0d1725;
  --color-surface: #132238;
  --color-surface-soft: #223348;
  --color-surface-muted: #132538;
  --color-surface-strong: #111e2f;
  --color-card: #111e2f;
  --color-card-soft: #223348;
  --color-card-muted: #223348;
  --color-panel: #111e2f;
  --color-panel-strong: #111e2f;
  --color-border: rgba(191, 211, 234, 0.28);
  --color-border-soft: rgba(191, 211, 234, 0.2);
  --color-border-strong: rgba(214, 227, 244, 0.38);
  --color-text: #f0f6ff;
  --color-heading: #f7fbff;
  --color-heading-soft: #deebfb;
  --color-section-title: #f7fbff;
  --color-card-title: #e3eaf2;
  --color-label: #d4dde9;
  --color-label-strong: #f0f6ff;
  --color-help: #b9cbe0;
  --color-description: #cddcf0;
  --color-text-muted: #b9cbe0;
  --color-text-soft: #afc0d3;
  --color-icon: #cddcf0;
  --color-icon-muted: #afc0d3;
  --color-icon-strong: #f7fbff;
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.28);
  --color-input-bg: #223348;
  --color-input-disabled-bg: #132238;
  --color-input-bg-disabled: #132238;
  --color-input-text: #f7fbff;
  --color-input-placeholder: #afc0d3;
  --color-input-disabled-text: #9fb1c8;
  --color-input-border: rgba(197, 213, 233, 0.34);
  --color-danger-bg: rgba(180, 35, 24, 0.22);
  --color-danger-text: #ffc8c2;
  --color-info-bg: rgba(40, 96, 148, 0.24);
  --color-info-border: rgba(116, 170, 224, 0.45);
  --color-info-text: #deebfb;

  --app-body-bg:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(21, 91, 154, 0.14), transparent 55%),
    linear-gradient(180deg, #111e2f 0%, #050d16 100%);
  --app-featured-bg-fallback: #132238;
  --app-featured-bg:
    radial-gradient(ellipse 112% 82% at 0% 0%, rgba(216, 162, 27, 0.15), transparent 54%),
    radial-gradient(ellipse 88% 62% at 100% 12%, rgba(21, 91, 154, 0.34), transparent 50%),
    radial-gradient(ellipse 72% 52% at 46% 108%, rgba(8, 28, 48, 0.82), transparent 60%),
    linear-gradient(168deg, #031c33 0%, #062847 46%, #0b1c2a 100%);

  --app-hero-eyebrow: rgba(255, 236, 180, 0.95);
  --app-hero-title: var(--color-white);
  --app-hero-body-bg: linear-gradient(180deg, #132238 0%, #223348 100%);
  --app-hero-ribbon: linear-gradient(
    90deg,
    rgba(216, 162, 27, 0.9) 0%,
    rgba(200, 150, 40, 0.5) 42%,
    rgba(60, 120, 180, 0.75) 100%
  );

  --theme-surface-card: var(--color-card);
  --theme-surface-card-soft: var(--color-card-soft);
  --theme-border-card: var(--color-border-soft);
  --theme-text-heading: #f7fbff;
  --theme-text-body: #e3eaf2;
  --theme-text-muted: #afc0d3;
  --theme-text-subtle: #8598af;
  --theme-text-muted-strong: #d4dde9;
  --theme-accent-eyebrow: #e8c76a;
  --theme-stat-value: #9fd0ff;
  --theme-accent-line: linear-gradient(
    90deg,
    rgba(216, 162, 27, 0.88) 0%,
    rgba(200, 150, 40, 0.45) 42%,
    rgba(120, 175, 230, 0.75) 100%
  );
  --theme-card-inset: 0 1px 0 rgba(255, 255, 255, 0.06);
  --theme-shadow-hero: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 36px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.28);
  --theme-shadow-block: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 34px rgba(0, 0, 0, 0.38);
  --theme-shadow-stat: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 22px rgba(0, 0, 0, 0.32);
  --theme-input-bg: var(--color-input-bg);
  --theme-input-border: var(--color-input-border);
  --theme-input-text: var(--color-input-text);
  --theme-list-row-hover: rgba(255, 255, 255, 0.06);
  --theme-list-border: rgba(255, 255, 255, 0.1);
  --theme-btn-secondary-bg: #2b3f52;
  --theme-btn-secondary-border: #5d768e;
  --theme-btn-secondary-text: #f0f6ff;
  --theme-btn-secondary-hover-bg: #334c63;
  --theme-btn-secondary-hover-border: #7690af;
  --theme-btn-muted-bg: #31465f;
  --theme-btn-muted-border: #607b99;
  --theme-btn-muted-text: #f0f6ff;
  --theme-btn-muted-hover-bg: #3a516d;
  --theme-btn-muted-hover-border: #7e9ebf;
  --theme-form-section-bg: #132238;
  --theme-form-section-border: #52657a;
  --theme-empty-bg: #223348;
  --theme-empty-border: #7ca6d2;
  --theme-quick-icon-bg: linear-gradient(165deg, #4a3a1e, #5a4622);
  --theme-quick-icon-border: #d8a21b;
  --theme-quick-icon-fg: #f0f6ff;
  --theme-badge-accent-bg: #4a3a1e;
  --theme-badge-accent-border: #d8a21b;
  --theme-badge-accent-text: #ffe7ac;

  --route-card-bg: #111e2f;
  --route-card-border: #2b3f52;
  --route-card-inner-bg: #132238;
  --route-card-inner-border: #334c63;
  --route-form-shell-bg: var(--route-card-bg);
  --route-section-bg: var(--route-card-bg);
  --route-section-soft-bg: var(--route-card-bg);
  --route-section-border: #2b3f52;
  --route-reference-top-bg: linear-gradient(180deg, #17476f 0%, #0b3a66 100%);
  --route-field-bg: var(--color-card);
  --route-field-border: #425a72;
  --route-field-text: #f7fbff;
  --route-field-placeholder: #9eb7d2;
  --route-card-text: #e3eaf2;
  --route-field-disabled-bg: var(--route-card-bg);
  --route-field-disabled-text: #9fb1c8;
  --route-button-primary-bg: linear-gradient(180deg, #1a659d 0%, #0b3a66 100%);
  --route-button-primary-border: #286fa4;
  --route-button-primary-text: #ffffff;
  --route-button-primary-hover-bg: linear-gradient(180deg, #286fa4 0%, #17476f 100%);
  --route-button-primary-hover-border: #2f88c7;
  --route-button-secondary-bg: #111e2f;
  --route-button-secondary-border: #53708c;
  --route-button-secondary-text: #f0f6ff;
  --route-button-secondary-hover-bg: #2b3f52;
  --route-button-secondary-hover-border: #7690af;
  --route-button-danger-bg: linear-gradient(180deg, #c93636 0%, #962222 100%);
  --route-button-danger-border: #d75a52;
  --route-button-danger-text: #ffffff;
  --route-button-danger-hover-bg: linear-gradient(180deg, #d94848 0%, #a92222 100%);
  --route-button-danger-hover-border: #ef7d77;
  --route-status-draft-bg: #3b3320;
  --route-status-draft-border: #d8a21b;
  --route-status-draft-text: #ffe7ac;
  --route-status-final-bg: #14382e;
  --route-status-final-border: #39a87e;
  --route-status-final-text: #bcf4dc;
  --route-status-muted-bg: #223348;
  --route-status-muted-border: #53708c;
  --route-status-muted-text: #d4dde9;
  --route-focus-ring: rgba(116, 170, 224, 0.24);

  --app-hero-stage-start: #0d1725;
  --app-hero-stage-end: #17476f;
  --app-hero-stage-bg: linear-gradient(225deg, var(--app-hero-stage-end) 0%, var(--app-hero-stage-start) 72%);

  --sidebar-surface: var(--color-card);

  /* --app-* overrides para tema escuro */
  --app-bg: var(--color-bg);
  --app-surface: var(--color-surface);
  --app-surface-muted: var(--color-surface-muted);
  --app-surface-elevated: var(--color-card);
  --app-border: var(--color-border);
  --app-border-strong: var(--color-border-strong);
  --app-text: var(--color-text);
  --app-text-muted: var(--color-text-muted);
  --app-text-soft: var(--color-text-soft);
}

/* ========== 3 tema claro oficial (inclui alias legado claro) ========== */
html[data-theme="light"] {
  --color-bg: #f7fbff;
  --color-surface: var(--color-white);
  --color-surface-strong: #ffffff;
  --color-surface-soft: #ffffff;
  --color-card: var(--color-white);
  --color-card-muted: #ffffff;
  --color-border: #d4dde9;
  --color-border-strong: #afc0d3;
  --color-text: #132238;
  --color-text-muted: #52657a;
  --color-text-soft: #71839a;
  --shadow-card: 0 14px 34px rgba(7, 26, 51, 0.16);
  --shadow-soft: 0 6px 16px rgba(7, 26, 51, 0.1);
  --color-input-bg: var(--color-white);
  --color-input-disabled-bg: #e3eaf2;
  --color-input-text: #132238;
  --color-input-placeholder: #71839a;
  --color-input-border: rgba(31, 76, 125, 0.22);

  --app-body-bg: linear-gradient(180deg, #ffffff 0%, #e3eaf2 48%, #e3eaf2 100%);
  --app-featured-bg-fallback: #d4dde9;
  --app-featured-bg:
    radial-gradient(ellipse 110% 75% at 0% 0%, rgba(216, 162, 27, 0.12), transparent 52%),
    radial-gradient(ellipse 80% 60% at 100% 8%, rgba(21, 91, 154, 0.11), transparent 50%),
    radial-gradient(ellipse 70% 48% at 50% 105%, rgba(11, 58, 102, 0.08), transparent 58%),
    linear-gradient(168deg, #f7fbff 0%, #e3eaf2 34%, #e3eaf2 68%, #cddcf0 100%);

  --app-hero-eyebrow: rgba(255, 248, 230, 0.98);
  --app-hero-title: var(--color-white);
  --app-hero-body-bg: linear-gradient(180deg, var(--color-white) 0%, #ffffff 100%);
  --app-hero-ribbon: linear-gradient(
    90deg,
    rgba(216, 162, 27, 0.88) 0%,
    rgba(190, 145, 45, 0.5) 42%,
    rgba(45, 95, 145, 0.85) 100%
  );

  --theme-surface-card: var(--color-white);
  --theme-surface-card-soft: #ffffff;
  --theme-border-card: #e3eaf2;
  --theme-text-heading: #071a33;
  --theme-text-body: #132238;
  --theme-text-muted: #52657a;
  --theme-text-subtle: #71839a;
  --theme-text-muted-strong: #334c63;
  --theme-accent-eyebrow: #d8a21b;
  --theme-stat-value: #0b3a66;
  --theme-accent-line: linear-gradient(
    90deg,
    rgba(216, 162, 27, 0.92) 0%,
    rgba(200, 150, 40, 0.55) 42%,
    rgba(45, 95, 145, 0.82) 100%
  );
  --theme-card-inset: 0 1px 0 rgba(255, 255, 255, 0.08);
  --theme-shadow-hero: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 12px rgba(7, 26, 51, 0.07), var(--shadow-lg);
  --theme-shadow-block: 0 1px 0 rgba(255, 255, 255, 0.06) inset, var(--shadow-md);
  --theme-shadow-stat: 0 1px 0 rgba(255, 255, 255, 0.05) inset, var(--shadow-sm);
  --theme-input-bg: var(--color-white);
  --theme-input-border: rgba(31, 76, 125, 0.22);
  --theme-input-text: #132238;
  --theme-list-row-hover: var(--color-primary-soft);
  --theme-list-border: rgba(203, 216, 230, 0.85);
  --theme-btn-secondary-bg: #ffffff;
  --theme-btn-secondary-border: #afc0d3;
  --theme-btn-secondary-text: var(--color-primary);
  --theme-btn-secondary-hover-bg: var(--color-secondary-soft);
  --theme-btn-secondary-hover-border: var(--color-secondary);
  --theme-btn-muted-bg: #f0f6ff;
  --theme-btn-muted-border: #9eb7d2;
  --theme-btn-muted-text: var(--color-primary);
  --theme-btn-muted-hover-bg: #deebfb;
  --theme-btn-muted-hover-border: #7e9ebf;
  --theme-form-section-bg: #ffffff;
  --theme-form-section-border: #d4dde9;
  --theme-empty-bg: #ffffff;
  --theme-empty-border: #8ca6bf;
  --theme-quick-icon-bg: linear-gradient(165deg, #fff6dc, #fffaeb);
  --theme-quick-icon-border: #d8a21b;
  --theme-quick-icon-fg: #0b3a66;
  --theme-badge-accent-bg: var(--color-accent-soft);
  --theme-badge-accent-border: #d8a21b;
  --theme-badge-accent-text: var(--color-accent-hover);

  --route-card-bg: #ffffff;
  --route-card-border: #e3eaf2;
  --route-card-inner-bg: #ffffff;
  --route-card-inner-border: #d4dde9;
  --route-form-shell-bg: var(--route-card-bg);
  --route-section-bg: var(--route-card-bg);
  --route-section-soft-bg: var(--route-card-bg);
  --route-section-border: #e3eaf2;
  --route-reference-top-bg: linear-gradient(180deg, #17476f 0%, #0b3a66 100%);

  --app-hero-stage-start: #062847;
  --app-hero-stage-end: #155b9a;
  --app-hero-stage-bg: linear-gradient(315deg, var(--app-hero-stage-start) -25%, var(--app-hero-stage-end) 25%);

  --sidebar-surface: linear-gradient(225deg, var(--app-hero-stage-end) 0%, var(--app-hero-stage-start) 72%);

  /* --app-* overrides para tema claro explicito */
  --app-bg: var(--color-bg);
  --app-surface: var(--color-surface);
  --app-surface-muted: var(--color-surface-muted);
  --app-surface-elevated: var(--color-card);
  --app-border: var(--color-border);
  --app-border-strong: var(--color-border-strong);
  --app-text: var(--color-text);
  --app-text-muted: var(--color-text-muted);
  --app-text-soft: var(--color-text-soft);
}

/* aliases legados acima continuam apontando para dark/light oficiais */

/* Seletor 2 temas — visual fixo sidebar (cores só --sidebar-*) */
.sidebar-theme {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-theme__label {
  color: var(--sidebar-footer-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-theme-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.app-theme-grid__btn {
  background: var(--sidebar-link-surface);
  border: 1px solid var(--sidebar-link-border);
  border-radius: var(--radius-sm);
  color: var(--sidebar-fg-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  min-height: calc(var(--control-height-md) - 2px);
  padding: 8px 6px;
  text-align: center;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.app-theme-grid__btn:hover,
.app-theme-grid__btn:focus-visible {
  border-color: rgba(216, 162, 27, 0.35);
  color: var(--sidebar-brand-fg);
}

.app-theme-grid__btn[aria-pressed="true"] {
  background: var(--sidebar-theme-active-bg);
  border-color: rgba(216, 162, 27, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.app-theme-grid__btn[aria-checked="true"] {
  background: var(--sidebar-theme-active-bg);
  border-color: rgba(216, 162, 27, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.app-theme-grid__btn:focus-visible {
  outline: 2px solid var(--sidebar-focus-ring);
  outline-offset: 2px;
}

.app-theme-grid__btn small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-top: 3px;
  opacity: 0.88;
}