/**
 * CENOM - Dark Mode Support
 * Respeita preferência do sistema (prefers-color-scheme: dark)
 * Implementação completa para WCAG
 */

@media (prefers-color-scheme: dark) {
  :root {
    /* Inverte cores principais mas mantém proporções */
    --color-white: #0f0f0f;
    --color-gray-light: #1a1a1a;
    --color-gray-border: #333;
    --color-gray-dark: #f0f0f0;
    --color-gray-medium: #ccc;
  }

  /* ═══════════════════════════════════════════
     BODY & BACKGROUNDS
     ═══════════════════════════════════════════ */

  body {
    background-color: #0f0f0f;
    color: #f0f0f0;
  }

  html {
    background-color: #000;
  }

  /* ═══════════════════════════════════════════
     SECTIONS
     ═══════════════════════════════════════════ */

  section.section-light {
    background-color: #1a1a1a;
  }

  section.section-gray {
    background-color: #222;
  }

  section.section-primary {
    background-color: #001a4d;
    color: #f0f0f0;
  }

  section.section-primary h1,
  section.section-primary h2,
  section.section-primary h3,
  section.section-primary h4,
  section.section-primary h5,
  section.section-primary h6 {
    color: #fff;
  }

  /* ═══════════════════════════════════════════
     HEADER & NAVIGATION
     ═══════════════════════════════════════════ */

  header {
    background-color: #1a1a1a;
    border-bottom-color: #333;
  }

  header.header-scroll {
    background-color: #0f0f0f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }

  .nav-menu a {
    color: #ddd;
  }

  .nav-menu a:hover {
    color: var(--color-primary-light);
  }

  .nav-toggle {
    background: #333;
    color: #f0f0f0;
  }

  .nav-toggle:hover {
    background: #444;
  }

  /* ═══════════════════════════════════════════
     CARDS & BOXES
     ═══════════════════════════════════════════ */

  .card {
    background-color: #2a2a2a;
    border-color: #444;
    color: #f0f0f0;
  }

  .card-bordered {
    border-color: #333;
  }

  .card-elevated {
    background-color: #2a2a2a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }

  .card-elevated:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  }

  .card h4,
  .card h3,
  .card h2 {
    color: #fff;
  }

  .card p {
    color: #ccc;
  }

  /* ═══════════════════════════════════════════
     FORM ELEMENTS
     ═══════════════════════════════════════════ */

  input,
  textarea,
  select {
    background-color: #2a2a2a;
    color: #f0f0f0;
    border-color: #444;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 82, 163, 0.3);
    background-color: #1a1a1a;
  }

  label {
    color: #f0f0f0;
  }

  .form-group {
    color: #ccc;
  }

  .form-error {
    color: #ff6b6b;
  }

  .form-help {
    color: #999;
  }

  /* ═══════════════════════════════════════════
     BUTTONS
     ═══════════════════════════════════════════ */

  .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #0066cc);
  }

  .btn-secondary {
    background: #333;
    color: #f0f0f0;
    border-color: #666;
  }

  .btn-secondary:hover {
    background: #444;
    border-color: #777;
  }

  .btn-ghost {
    color: #f0f0f0;
  }

  /* ═══════════════════════════════════════════
     LINKS
     ═══════════════════════════════════════════ */

  a {
    color: #4da6ff;
  }

  a:hover {
    color: #66b3ff;
  }

  .link-underline {
    color: #4da6ff;
    border-bottom-color: #4da6ff;
  }

  .link-underline:hover {
    border-bottom-color: #66b3ff;
  }

  /* ═══════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════ */

  footer {
    background-color: #000;
    border-top-color: #333;
  }

  footer a {
    color: #4da6ff;
  }

  footer a:hover {
    color: #66b3ff;
  }

  /* ═══════════════════════════════════════════
     DIVIDERS & LINES
     ═══════════════════════════════════════════ */

  .divider,
  .divider-subtle {
    border-color: #333;
  }

  /* ═══════════════════════════════════════════
     HERO SECTION
     ═══════════════════════════════════════════ */

  .hero {
    background-color: #1a1a1a;
  }

  .hero::before {
    background: linear-gradient(135deg, #1a1a1a, #222);
  }

  .hero h1 {
    color: #fff;
  }

  .hero-subtitle,
  .hero-description {
    color: #ccc;
  }

  .hero-tag {
    color: var(--color-primary-light);
  }

  /* ═══════════════════════════════════════════
     QUICK ACCESS TILES
     ═══════════════════════════════════════════ */

  .card-bordered:hover {
    background-color: #333;
  }

  /* ═══════════════════════════════════════════
     JOURNEY TIMELINE
     ═══════════════════════════════════════════ */

  .journey-step-number {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  .journey-step h4 {
    color: #fff;
  }

  .journey-step p {
    color: #ccc;
  }

  .journey-step::before {
    background-color: var(--color-primary);
    opacity: 0.5;
  }

  /* ═══════════════════════════════════════════
     BACK TO TOP BUTTON
     ═══════════════════════════════════════════ */

  .back-to-top {
    background: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  .back-to-top:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  }

  /* ═══════════════════════════════════════════
     TEXT UTILITIES
     ═══════════════════════════════════════════ */

  .text-muted {
    color: #999;
  }

  .text-gray {
    color: #ccc;
  }

  .text-bold {
    color: #fff;
  }

  /* ═══════════════════════════════════════════
     BLOCKQUOTE
     ═══════════════════════════════════════════ */

  blockquote {
    border-left-color: var(--color-primary);
    color: #ccc;
  }

  /* ═══════════════════════════════════════════
     CODE
     ═══════════════════════════════════════════ */

  code,
  pre {
    background-color: #1a1a1a;
    color: #e0e0e0;
    border-color: #333;
  }

  /* ═══════════════════════════════════════════
     LOGO & BRANDING
     ═══════════════════════════════════════════ */

  .logo {
    color: #f0f0f0;
  }

  .logo-text {
    color: #f0f0f0;
  }

  /* ═══════════════════════════════════════════
     SCROLLBAR (Webkit)
     ═══════════════════════════════════════════ */

  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #666;
  }

  /* ═══════════════════════════════════════════
     PLACEHOLDER TEXT
     ═══════════════════════════════════════════ */

  ::placeholder {
    color: #777;
  }

  ::-webkit-input-placeholder {
    color: #777;
  }

  ::-moz-placeholder {
    color: #777;
  }

  :-ms-input-placeholder {
    color: #777;
  }

  /* ═══════════════════════════════════════════
     FOCUS VISIBLE
     ═══════════════════════════════════════════ */

  :focus-visible {
    outline-color: var(--color-secondary);
  }

  /* ═══════════════════════════════════════════
     SELECTION
     ═══════════════════════════════════════════ */

  ::selection {
    background-color: var(--color-primary);
    color: #fff;
  }

  ::-moz-selection {
    background-color: var(--color-primary);
    color: #fff;
  }
}