/* ─── Dark Mode ─── */

@layer base {
  [data-theme="dark"] {
    --color-primary: #2dd4bf;
    --color-secondary: #f1f5f9;
    --color-accent: #5eead4;
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-section-bg: #08111f;
    --color-section-alt-bg: #12243a;
    --color-section-text: #cbd5e1;
    --color-section-heading: #f8fafc;
    --color-widget-bg: #132033;
    --color-widget-border: #2d415a;
    --color-widget-text: #f8fafc;
    --color-widget-muted: #94a3b8;
    --color-widget-button-bg: #2dd4bf;
    --color-widget-button-text: #042e25;
    --color-section-gradient: linear-gradient(135deg, #08111f 0%, #0f1f32 48%, #10344a 100%);
    --color-text: #e2e8f0;
    --color-heading: #f1f5f9;
    --color-muted: #94a3b8;
    --color-link: #2dd4bf;
    --color-link-hover: #5eead4;
    --color-border: #334155;
    --color-btn-bg: #2dd4bf;
    --color-btn-text: #0f172a;

    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-input-bg: #1e293b;
    --color-input-border: #334155;
    --color-placeholder: #64748b;
    --color-code-bg: #1e293b;
    --color-icon: #94a3b8;
    --color-icon-hover: #2dd4bf;
  }

  /* ─── Theme transition ─── */
  .cc-transitioning,
  .cc-transitioning *,
  .cc-transitioning *::before,
  .cc-transitioning *::after {
    transition: background-color var(--cc-transition-duration) var(--ease-smooth),
                color var(--cc-transition-duration) var(--ease-smooth),
                border-color var(--cc-transition-duration) var(--ease-smooth),
                box-shadow var(--cc-transition-duration) var(--ease-smooth),
                fill var(--cc-transition-duration) var(--ease-smooth),
                stroke var(--cc-transition-duration) var(--ease-smooth) !important;
  }

  /* ─── Visibility helpers ─── */
  html:not([data-theme="dark"]) [data-cc-visibility="dark-only"],
  [data-theme="dark"] [data-cc-visibility="light-only"] {
    display: none;
  }

  /* ─── Reduced motion ─── */
  @media (prefers-reduced-motion: reduce) {
    .cc-transitioning,
    .cc-transitioning *,
    .cc-transitioning *::before,
    .cc-transitioning *::after {
      transition-duration: 0ms !important;
    }
  }
}