/**
 * ShowMyIP Dark Mode (roadmap item 36)
 *
 * Token remap only — no component selectors are duplicated here. Because
 * design-system.css drives every surface/text/border through CSS custom
 * properties (and legacy aliases point at the same tokens), overriding the
 * token values inside a dark scope flips the whole UI.
 *
 * Activation (CONTRACT):
 *   1. Explicit user choice  -> html[data-theme="dark"]   (set by dark-mode.js)
 *   2. System preference     -> @media (prefers-color-scheme: dark)
 *      ...but ONLY when the user has not explicitly chosen light, i.e.
 *      html[data-theme="light"] always wins over the media query.
 *
 * Load order: this file must be linked AFTER app.min.css (the NAV lane adds the
 * <link> in head.php) so these :root overrides take precedence.
 *
 * Contrast: body text #e8eaed on #15171c = ~13.8:1 (AAA). Secondary text
 * #a8b0ba on #15171c = ~7.7:1 (AAA). Links #6ab0ff on #15171c = ~7.0:1.
 */

/* ---- Explicit dark theme (user toggled) ---- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Neutral ramp inverted (50 = darkest surface, 900 = lightest text) */
  --color-gray-50:  #1b1e24;
  --color-gray-100: #20242b;
  --color-gray-200: #2a2f37;
  --color-gray-300: #3a414b;
  --color-gray-400: #5a626d;
  --color-gray-500: #8a929c;
  --color-gray-600: #a8b0ba;
  --color-gray-700: #c3c9d1;
  --color-gray-800: #dce0e6;
  --color-gray-900: #f2f4f7;

  /* Page surfaces */
  --color-bg-page:   #15171c;
  --color-bg-subtle: #1b1e24;
  --color-bg-muted:  #20242b;

  /* Text */
  --color-text-primary:   #e8eaed;
  --color-text-secondary: #a8b0ba;
  --color-text-muted:     #8a929c;
  --color-text-inverse:   #15171c;

  /* Links — lighter for AA on dark bg */
  --color-link:         #6ab0ff;
  --color-link-hover:   #93c5ff;
  --color-link-visited: #c9a6ff;

  /* Brand stays vivid; lighten slightly for dark surfaces */
  --color-primary:       #ff7a45;
  --color-primary-dark:  #f15a23;
  --color-primary-light: #ff9468;
  --color-primary-alpha: rgba(255, 122, 69, 0.18);

  /* Semantic text tier — brightened for ≥4.5:1 on dark bg */
  --color-success-text: #6fd17a;
  --color-danger-text:  #ff8a82;
  --color-warning-text: #f5c451;
  --color-info-text:    #5ec8e8;

  /* Semantic theme-aware surfaces */
  --surface-page:   var(--color-bg-page);
  --surface-subtle: var(--color-bg-subtle);
  --surface-muted:  var(--color-bg-muted);
  --surface-card:   #1e2128;
  --surface-border: #333a44;
  --surface-border-strong: #444c58;
  --text-default: var(--color-text-primary);
  --text-subtle:  var(--color-text-secondary);

  /* Focus ring stays high-contrast */
  --focus-ring-color: #5aa0ff;

  /* Shadows need more depth on dark */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* Category tints — lifted for visibility on dark surfaces */
  --cat-dns: #66bb6a;
  --cat-ip: #5a9cf0;
  --cat-network: #4dd0e1;
  --cat-security: #ef5350;
  --cat-developer: #b388ff;
  --cat-domain: #e0b34d;
  --cat-email: #4db6ac;
  --cat-browser: #9575cd;
  --cat-content: #ec78a8;
  --cat-analysis: #7986cb;
  --cat-redirect: #ff8a65;
  --cat-asn-bgp: #90a4ae;
}

/* System-preference dark mode: applies when the user has NOT explicitly
   forced a theme. html[data-theme="light"] beats this media query because an
   attribute selector + explicit value is authored to win in dark-mode.js
   (it sets data-theme="light" to opt out). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;

    --color-gray-50:  #1b1e24;
    --color-gray-100: #20242b;
    --color-gray-200: #2a2f37;
    --color-gray-300: #3a414b;
    --color-gray-400: #5a626d;
    --color-gray-500: #8a929c;
    --color-gray-600: #a8b0ba;
    --color-gray-700: #c3c9d1;
    --color-gray-800: #dce0e6;
    --color-gray-900: #f2f4f7;

    --color-bg-page:   #15171c;
    --color-bg-subtle: #1b1e24;
    --color-bg-muted:  #20242b;

    --color-text-primary:   #e8eaed;
    --color-text-secondary: #a8b0ba;
    --color-text-muted:     #8a929c;
    --color-text-inverse:   #15171c;

    --color-link:         #6ab0ff;
    --color-link-hover:   #93c5ff;
    --color-link-visited: #c9a6ff;

    --color-primary:       #ff7a45;
    --color-primary-dark:  #f15a23;
    --color-primary-light: #ff9468;
    --color-primary-alpha: rgba(255, 122, 69, 0.18);

    --color-success-text: #6fd17a;
    --color-danger-text:  #ff8a82;
    --color-warning-text: #f5c451;
    --color-info-text:    #5ec8e8;

    --surface-page:   var(--color-bg-page);
    --surface-subtle: var(--color-bg-subtle);
    --surface-muted:  var(--color-bg-muted);
    --surface-card:   #1e2128;
    --surface-border: #333a44;
    --surface-border-strong: #444c58;
    --text-default: var(--color-text-primary);
    --text-subtle:  var(--color-text-secondary);

    --focus-ring-color: #5aa0ff;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-color: rgba(0, 0, 0, 0.5);

    --cat-dns: #66bb6a;
    --cat-ip: #5a9cf0;
    --cat-network: #4dd0e1;
    --cat-security: #ef5350;
    --cat-developer: #b388ff;
    --cat-domain: #e0b34d;
    --cat-email: #4db6ac;
    --cat-browser: #9575cd;
    --cat-content: #ec78a8;
    --cat-analysis: #7986cb;
    --cat-redirect: #ff8a65;
    --cat-asn-bgp: #90a4ae;
  }
}

/* Dark-mode component nudges that tokens alone can't reach.
   Kept minimal and scoped so they don't leak into light mode. */
html[data-theme="dark"] .theme-toggle,
html:not([data-theme="light"]) .theme-toggle {
  color: var(--color-text-primary);
}

/* Footer is intentionally dark already; in dark mode pin it to the
   page surface ramp so it doesn't look like a separate light block. */
html[data-theme="dark"] #footer { background-color: #101216; }
html[data-theme="dark"] #footer-bottom { background-color: #0b0d10; }

/* Code blocks: keep the inverted look readable. */
html[data-theme="dark"] pre { background-color: #0e1014; color: var(--color-gray-800); }
html[data-theme="dark"] code { background-color: var(--color-gray-100); }

/* Inputs/selects: ensure the native select arrow stays visible on dark. */
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8b0ba' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Smooth theme switch without animating layout. */
html[data-theme] body,
html[data-theme] .card,
html[data-theme] .content-section,
html[data-theme] header[role="banner"],
html[data-theme] .form-control {
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body,
  html[data-theme] .card,
  html[data-theme] .content-section,
  html[data-theme] header[role="banner"],
  html[data-theme] .form-control { transition: none; }
}