/* ==========================================================================
   Rahidul Islam — Dark Mode & Theme Color Scheme
   Bespoke theme tokens supporting prefers-color-scheme & explicit toggle
   ========================================================================== */

:root {
  color-scheme: light;
}

/* Base theme toggle button sizing & icon visibility */
.theme-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle:hover {
  border-color: var(--green);
  color: var(--green);
}

.theme-sun {
  display: none;
}

.theme-moon {
  display: block;
}

/* System Dark Mode (when user hasn't explicitly chosen light mode) */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #090d16;
    --surface: #0f172a;
    --surface-alt: #162032;
    --surface-highlight: #1e293b;
    --ink: #f8fafc;
    --ink-secondary: #cbd5e1;
    --muted: #94a3b8;
    --muted-light: #64748b;
    --line: #1e293b;
    --line-strong: #334155;
    --green: #14b8a6;
    --green-hover: #2dd4bf;
    --green-light: rgba(20, 184, 166, 0.12);
    --green-border: rgba(20, 184, 166, 0.3);
    --clay: #14b8a6;
    --accent-glow: rgba(20, 184, 166, 0.25);
    --status-live: #10b981;
    --status-glow: rgba(16, 185, 129, 0.35);
    --header-bg: rgba(9, 13, 22, 0.88);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 18px 36px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 184, 166, 0.3);
  }

  :root:not([data-theme="light"]) .theme-sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-moon {
    display: none;
  }

  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) textarea {
    background: #0d131f;
    border-color: #2a3749;
    color: var(--ink);
  }

  :root:not([data-theme="light"]) input:focus,
  :root:not([data-theme="light"]) textarea:focus {
    background: #111827;
    border-color: var(--green);
  }

  :root:not([data-theme="light"]) .form-errors {
    background: #3b1717;
    border-color: #7f1d1d;
    color: #fca5a5;
  }

  :root:not([data-theme="light"]) .notification {
    background: #064e3b;
    border-color: #059669;
    color: #a7f3d0;
  }
}

/* Explicit Dark Mode selection */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #090d16;
  --surface: #0f172a;
  --surface-alt: #162032;
  --surface-highlight: #1e293b;
  --ink: #f8fafc;
  --ink-secondary: #cbd5e1;
  --muted: #94a3b8;
  --muted-light: #64748b;
  --line: #1e293b;
  --line-strong: #334155;
  --green: #14b8a6;
  --green-hover: #2dd4bf;
  --green-light: rgba(20, 184, 166, 0.12);
  --green-border: rgba(20, 184, 166, 0.3);
  --clay: #14b8a6;
  --accent-glow: rgba(20, 184, 166, 0.25);
  --status-live: #10b981;
  --status-glow: rgba(16, 185, 129, 0.35);
  --header-bg: rgba(9, 13, 22, 0.88);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 18px 36px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 184, 166, 0.3);
}

:root[data-theme="dark"] .theme-sun {
  display: block;
}

:root[data-theme="dark"] .theme-moon {
  display: none;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
  background: #0d131f;
  border-color: #2a3749;
  color: var(--ink);
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus {
  background: #111827;
  border-color: var(--green);
}

:root[data-theme="dark"] .form-errors {
  background: #3b1717;
  border-color: #7f1d1d;
  color: #fca5a5;
}

:root[data-theme="dark"] .notification {
  background: #064e3b;
  border-color: #059669;
  color: #a7f3d0;
}

@media print {
  :root {
    color-scheme: light;
  }
}