/*
 * 03-theme-dark.css — semantic dark theme tokens only.
 * Component appearance overrides live in components/theme-dark-components.css.
 * Extracted from dark-redesign.css (Etapa 7, Fase 6).
 */

html[data-theme="dark"] {
  color-scheme: dark;

  /* Original deep navy palette — near-black base with blue-graphite surfaces. */
  --color-bg: #0d1725;
  --color-shell: #0d1725;
  --color-bg-strong: #050d16;
  --color-bg-subtle: #111e2f;
  --color-bg-glow: #17476f;
  --color-surface: #132238;
  --color-surface-soft: #223348;
  --color-surface-muted: #111e2f;
  --color-surface-strong: #111e2f;
  --color-surface-elevated: #223348;
  --color-card: #132238;
  --color-card-soft: #223348;
  --color-card-muted: #111e2f;
  --color-panel: #111e2f;
  --color-panel-strong: #111e2f;

  /* Original bluish text hierarchy — cool whites over deep navy. */
  --color-text: #f0f6ff;
  --color-heading: #f7fbff;
  --color-heading-soft: #deebfb;
  --color-section-title: #f7fbff;
  --color-card-title: #e3eaf2;
  --color-muted: #afc0d3;
  --color-muted-strong: #d4dde9;
  --color-subtle: #8598af;
  --color-text-muted: #afc0d3;
  --color-text-soft: #8598af;
  --color-label: #d4dde9;
  --color-label-strong: #f0f6ff;
  --color-help: #9fb1c8;
  --color-description: #afc0d3;
  --color-icon: #cddcf0;
  --color-icon-muted: #9fb1c8;
  --color-icon-strong: #f7fbff;

  /* Original vivid-blue actions and gold accent, with a visible gold glow. */
  --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.4);
  --color-primary: #12507f;
  --color-primary-strong: #0b3a66;
  --color-primary-dark: #062847;
  --color-primary-hover: #1a659d;
  --color-primary-bright: #2f88c7;
  --color-primary-soft: #16324b;
  --color-secondary: #155b9a;
  --color-secondary-hover: #1a70bb;
  --color-secondary-soft: #16324b;
  --color-accent: #d8a21b;
  --color-accent-hover: #e0ab3c;
  --color-accent-soft: #3b3320;
  --color-accent-text: #e0ab3c;
  --color-accent-border-soft: #7a641f;
  --color-accent-border-strong: #a5851f;
  --glow-accent: 0 14px 34px rgba(216, 162, 27, 0.22);
  --color-focus: #e0ab3c;
  /* No escuro o halo acompanha o foco ambar, nao o azul do tema claro. */
  --color-focus-ring: rgba(224, 171, 60, 0.38);
  /* HT-01: 7,76:1 contra o fundo do campo e 6,32:1 contra a superficie. Contra
     a *borda* do campo (#607d93) da 2,07:1, e reprovaria — e por isso que o
     anel leva `outline-offset: 2px`: com o afastamento, quem fica ao lado dele
     e o fundo, nao a borda. O offset aqui e requisito, nao enfeite. */
  --color-focus-visible-ring: #e0ab3c;
  --color-selection: rgba(216, 162, 27, 0.34);

  /* Functional states */
  --color-success: #58c694;
  --color-success-strong: #16805a;
  --color-success-soft: rgba(88, 198, 148, 0.13);
  --color-success-border-soft: rgba(88, 198, 148, 0.35);
  --color-info: #74aae0;
  --color-info-soft: rgba(114, 174, 230, 0.13);
  --color-info-border: rgba(114, 174, 230, 0.34);
  --color-info-border-strong: rgba(114, 174, 230, 0.48);
  --color-warning: #e6b95d;
  --color-warning-strong: #9b6b18;
  --color-warning-soft: rgba(230, 185, 93, 0.14);
  --color-danger: #ef7d77;
  --color-danger-strong: #a84444;
  --color-danger-soft: rgba(239, 125, 119, 0.13);
  --color-danger-border-soft: rgba(239, 125, 119, 0.32);
  --color-danger-border-strong: rgba(239, 125, 119, 0.5);

  /* Elevation and motion — deeper shadows with an inset highlight, like the old theme. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 34px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-elevated: 0 26px 70px rgba(0, 0, 0, 0.55);
  /* O foco escuro orienta pela borda, sem halo luminoso ao redor do controle. */
  --focus-ring: none;
  --transition-fast: 120ms cubic-bezier(.2, .8, .2, 1);
  --transition-base: 170ms cubic-bezier(.2, .8, .2, 1);
  --transition-slow: 240ms cubic-bezier(.2, .8, .2, 1);

  /* Canonical component contracts */
  --color-input-bg: #132538;
  --color-input-disabled-bg: #243541;
  --color-input-bg-disabled: #243541;
  --color-input-text: #ffffff;
  --color-input-placeholder: #9ba9b4;
  --color-input-disabled-text: #909da7;
  --color-input-border: #607d93;
  --cv-field-bg: var(--color-input-bg);
  --cv-field-border: 1px solid var(--color-input-border);
  --cv-field-focus-ring: var(--focus-ring);
  --cv-field-shadow-focus: none;
  --cv-select-focus-ring: none;
  --cv-select-focus-shadow: none;
  --cv-card-border: 1px solid var(--color-border);
  --cv-card-shadow: var(--shadow-card);
  /* Uma única família visual sustenta cards de lista e de formulário. */
  --cv-card-family-bg: var(--color-surface);
  --cv-card-family-header-bg: var(--color-surface-muted);
  --cv-card-family-header-image: linear-gradient(to right, color-mix(in srgb, var(--color-accent) 12%, transparent) 0, transparent 88px);
  --cv-card-family-border: var(--color-border);
  --cv-card-family-border-strong: var(--color-border-strong);
  --cv-card-family-shadow: var(--shadow-card);
  --cv-card-family-accent-bg: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
  --cv-card-family-accent-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
    0 0 10px color-mix(in srgb, var(--color-accent) 16%, transparent);
  --cv-card-family-accent-width: 8px;
  --theme-surface-card: var(--color-surface);
  --theme-surface-card-soft: var(--color-surface-soft);
  --theme-border-card: var(--color-border);
  --theme-text-heading: var(--color-heading);
  --theme-text-body: var(--color-text);
  --theme-text-muted: var(--color-muted);
  --theme-text-subtle: var(--color-subtle);
  --theme-text-muted-strong: var(--color-muted-strong);
  --theme-accent-eyebrow: var(--color-accent);
  --theme-stat-value: #e3eaf2;
  --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: #2b3f52;
  --theme-list-border: var(--color-border);
  --theme-btn-secondary-bg: #243541;
  --theme-btn-secondary-border: rgba(155, 174, 188, 0.28);
  --theme-btn-secondary-text: #f7fbff;
  --theme-btn-secondary-hover-bg: #334654;
  --theme-btn-secondary-hover-border: rgba(181, 198, 210, 0.42);
  --theme-btn-muted-bg: #243541;
  --theme-btn-muted-border: rgba(180, 194, 205, 0.18);
  --theme-btn-muted-text: #d2d9de;
  --theme-btn-muted-hover-bg: #243541;
  --theme-btn-muted-hover-border: rgba(196, 208, 217, 0.3);
  --theme-form-section-bg: var(--color-surface);
  --theme-form-section-border: var(--color-border);
  --theme-empty-bg: var(--color-surface-muted);
  --theme-empty-border: var(--color-border-strong);

  /* Semantic warning remains gold; decorative accent never becomes a button fill. */
  --state-warning-bg: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  --state-warning-bg-hover: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface));
  --state-warning-bg-active: color-mix(in srgb, var(--color-warning) 74%, var(--color-surface));
  --state-warning-border: color-mix(in srgb, var(--color-warning) 62%, var(--color-border));
  --state-warning-border-hover: color-mix(in srgb, var(--color-warning) 78%, var(--color-border));
  --state-warning-text: #f2d487;
  --state-warning-text-active: #17130a;
  --state-warning-dot: var(--color-warning);
  --state-warning-glow: 0 0 0 1px rgba(230, 185, 93, 0.16);

  /* Complex component contracts. */
  --surface-pagination: transparent;
  --surface-filter-button: var(--color-surface-soft);
  --border-filter-button: var(--color-border);
  --color-filter-button: var(--color-muted-strong);
  --surface-stepper: var(--color-surface);
  --border-stepper: var(--color-border);
  --shadow-stepper: var(--shadow-sm);
  --stepper-idle-bg: var(--color-surface-muted);
  --stepper-idle-border: var(--color-border-strong);
  --stepper-idle-color: var(--color-muted);
  --stepper-active-bg: #6b531a;
  --stepper-active-border: var(--color-accent);
  --stepper-active-color: #fff3cf;
  --stepper-done-bg: var(--color-accent-soft);
  --stepper-done-border: var(--color-accent-border-soft);
  --stepper-done-color: var(--color-accent-text);
  --stepper-connector: var(--color-border);
  --stepper-connector-on: var(--color-accent);
  --stepper-label-active: var(--color-heading);
  --stepper-label-done: var(--color-muted-strong);
  --stepper-status-current-color: var(--color-accent);
  --cv-form-section-bg: var(--cv-card-family-bg);
  --cv-form-section-header-bg: var(--cv-card-family-header-bg);
  --cv-form-section-border: var(--cv-card-family-border);
  --cv-form-section-shadow: var(--cv-card-family-shadow);
  --cv-icon-btn-tooltip-bg: var(--color-bg-strong);
  --cv-icon-btn-tooltip-color: var(--color-text);
  --cv-icon-btn-tooltip-border: var(--color-border-strong);

  /* Primary and danger actions carry a restrained top-to-bottom gradient, like the previous theme. */
  --action-primary-bg: linear-gradient(180deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  --action-primary-hover-bg: linear-gradient(180deg, var(--color-primary-bright) 0%, var(--color-primary) 100%);
  --action-primary-border: var(--color-primary-hover);
  --cv-btn-primary-bg: linear-gradient(180deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  --cv-btn-primary-hover-bg: linear-gradient(180deg, var(--color-primary-bright) 0%, var(--color-primary) 100%);
  --cv-btn-primary-border: var(--color-primary-hover);
  --cv-btn-pdf-bg: var(--color-danger-strong);
  --cv-btn-pdf-hover-bg: #b84c4c;
  --cv-btn-docx-bg: var(--color-primary-strong);
  --cv-btn-docx-hover-bg: var(--color-primary-hover);
  --route-button-primary-bg: linear-gradient(180deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  --route-button-primary-hover-bg: linear-gradient(180deg, var(--color-primary-bright) 0%, var(--color-primary) 100%);

  /* Shell */
  --sidebar-width: clamp(238px, 17.5vw, 276px);
  --sidebar-surface: #111e2f;
  --sidebar-fg: #d2d9de;
  --sidebar-fg-soft: #b5c0c8;
  --sidebar-fg-heading: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-shadow: inset -1px 0 rgba(255, 255, 255, 0.04), 14px 0 42px rgba(0, 0, 0, 0.22);
  --sidebar-brand-fg: #ffffff;
  --sidebar-badge-bg: linear-gradient(140deg, rgba(219, 166, 32, 0.72) 0%, rgba(179, 129, 27, 0.85) 100%);
  --sidebar-link-surface: transparent;
  --sidebar-link-border: transparent;
  --sidebar-link-fg: #b5c0c8;
  --sidebar-link-hover-bg: #243541;
  --sidebar-icon-bg: #243541;
  --sidebar-icon-fg: #c3ccd3;
  --sidebar-active-bg: #1e3a50;
  --sidebar-active-fg: #ffffff;
  --sidebar-active-border: #607d93;
  --sidebar-panel-border: #3f657f;
  --sidebar-footer-fg: #9ba9b4;
  --sidebar-logout-bg: transparent;
  --sidebar-logout-border: rgba(255, 255, 255, 0.11);
  --sidebar-logout-fg: #d2d9de;
  --sidebar-focus-ring: rgba(131, 188, 232, 0.52);
  --sidebar-theme-active-bg: rgba(75, 143, 197, 0.23);

  --app-body-bg:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(21, 91, 154, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(216, 162, 27, 0.06), transparent 60%),
    linear-gradient(180deg, #111e2f 0%, #050d16 100%);
  --app-main-bg: transparent;
  --app-featured-bg: var(--color-surface);
  --app-hero-stage-start: #0d1725;
  --app-hero-stage-end: #17476f;
  --app-hero-stage-bg: linear-gradient(225deg, #17476f 0%, #0d1725 72%);
  --app-hero-body-bg: var(--color-surface);
  --app-hero-ribbon: var(--color-primary);
  --theme-accent-line: var(--color-primary);

  --app-bg: var(--color-bg);
  --app-surface: var(--color-surface);
  --app-surface-muted: var(--color-surface-muted);
  --app-surface-elevated: var(--color-surface-strong);
  --app-border: var(--color-border);
  --app-border-strong: var(--color-border-strong);
  --app-text: var(--color-text);
  --app-text-muted: var(--color-muted);
  --app-text-soft: var(--color-subtle);
  --app-primary: var(--color-primary);
  --app-primary-hover: var(--color-primary-hover);
  --app-primary-soft: var(--color-primary-soft);
}
html[data-theme="dark"] {
  /* Chips: saturated jewel-tone fills with bright text and a soft state glow. */
  --cv-chip-bg: #234763;
  --cv-chip-border: #4f83ad;
  --cv-chip-color: #e3eaf2;
  --cv-chip-glow: 0 0 0 1px rgba(79, 131, 173, 0.35), 0 0 12px rgba(79, 131, 173, 0.3);
  --cv-chip-success-bg: #0e6b50;
  --cv-chip-success-border: #2fbf94;
  --cv-chip-success-color: #d8ffef;
  --cv-chip-success-glow: 0 0 0 1px rgba(47, 191, 148, 0.4), 0 0 12px rgba(47, 191, 148, 0.32);
  --cv-chip-warning-bg: #7a4f12;
  --cv-chip-warning-border: #e0ab3c;
  --cv-chip-warning-color: #ffe7ac;
  --cv-chip-warning-glow: 0 0 0 1px rgba(224, 171, 60, 0.42), 0 0 12px rgba(224, 171, 60, 0.34);
  --cv-chip-danger-bg: #7c2933;
  --cv-chip-danger-border: #e26a72;
  --cv-chip-danger-color: #ffdcde;
  --cv-chip-danger-glow: 0 0 0 1px rgba(226, 106, 114, 0.4), 0 0 12px rgba(226, 106, 114, 0.32);
  --cv-chip-info-bg: #175988;
  --cv-chip-info-border: #55a1d6;
  --cv-chip-info-color: #deebfb;
  --cv-chip-info-glow: 0 0 0 1px rgba(85, 161, 214, 0.4), 0 0 12px rgba(85, 161, 214, 0.32);
  --cv-chip-pending-bg: #362e7a;
  --cv-chip-pending-border: #8074ef;
  --cv-chip-pending-color: #e2ddff;
  --cv-chip-pending-glow: 0 0 0 1px rgba(128, 116, 239, 0.4), 0 0 12px rgba(128, 116, 239, 0.32);
  --cv-chip-muted-bg: #2b3f52;
  --cv-chip-muted-border: #607d93;
  --cv-chip-muted-color: #e3eaf2;
  --cv-chip-muted-glow: 0 0 0 1px rgba(95, 125, 151, 0.3), 0 0 9px rgba(95, 125, 151, 0.22);
  --cv-chip-neutral-bg: #2b3f52;
  --cv-chip-neutral-border: #607d93;
  --cv-chip-neutral-color: #e3eaf2;
  --cv-chip-neutral-glow: var(--cv-chip-muted-glow);
  --cv-chip-entity-bg: #0d5f58;
  --cv-chip-entity-border: #36c4b1;
  --cv-chip-entity-color: #ccfff5;
  --cv-chip-entity-glow: 0 0 0 1px rgba(54, 196, 177, 0.4), 0 0 12px rgba(54, 196, 177, 0.32);
  --cv-chip-filter-bg: #175988;
  --cv-chip-filter-border: #55a1d6;
  --cv-chip-filter-color: #deebfb;
  --cv-chip-filter-glow: var(--cv-chip-info-glow);
}
@media (max-width: 1080px) {
  html[data-theme="dark"] {
    --sidebar-width: 224px;
  }
}
:is(html[data-theme="dark"]) {
  --cv-btn-focus-ring: none;
}