/* ==========================================================================
   theme-variables.css — Theme-Adaptive Vector & Custom Properties Engine
   myDraft CMS / iShareStuff Platform
   ========================================================================== */

/* 1. Default (Dark Mode Fallback / Active Tech-Dark) */
:root,
:root[data-theme="dark"],
:root[data-bs-theme="dark"] {
  --theme-text:             var(--color-text, #f8fafc);
  --theme-text-heading:     var(--color-text-heading, #ffffff);
  --theme-text-muted:       var(--color-text-muted, #94a3b8);
  --theme-accent:           var(--color-accent-cyan, #00f0ff);
  --theme-accent-secondary: var(--color-accent, #8b5cf6);
  --theme-accent-vibrant:   #60a5fa;
  --theme-surface:          var(--color-surface, #0f172a);
  --theme-surface-card:     var(--color-surface-card, #131c33);
  --theme-surface-elevated: var(--color-surface-elevated, #1e293b);
  --theme-border:           var(--color-border, rgba(255, 255, 255, 0.20));
  --theme-border-subtle:    rgba(255, 255, 255, 0.10);
}

/* 2. Canonical Light Mode */
:root[data-theme="light"],
:root[data-bs-theme="light"],
html.light,
body.light {
  --theme-text:             #0f172a;
  --theme-text-heading:     #020617;
  --theme-text-muted:       #475569;
  --theme-accent:           #0284c7;
  --theme-accent-secondary: #6366f1;
  --theme-accent-vibrant:   #3b82f6;
  --theme-surface:          #ffffff;
  --theme-surface-card:     #f8fafc;
  --theme-surface-elevated: #f1f5f9;
  --theme-border:           #cbd5e1;
  --theme-border-subtle:    rgba(0, 0, 0, 0.08);
}

/* 3. Automatic System Preference (Light Mode) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --theme-text:             #0f172a;
    --theme-text-heading:     #020617;
    --theme-text-muted:       #475569;
    --theme-accent:           #0284c7;
    --theme-accent-secondary: #6366f1;
    --theme-accent-vibrant:   #3b82f6;
    --theme-surface:          #ffffff;
    --theme-surface-card:     #f8fafc;
    --theme-surface-elevated: #f1f5f9;
    --theme-border:           #cbd5e1;
    --theme-border-subtle:    rgba(0, 0, 0, 0.08);
  }
}

/* 4. Vector & SVG Theming Utility Classes */
.mydraft-svg-icon {
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
  flex-shrink: 0;
  transition: color var(--duration-fast, 150ms) ease, stroke var(--duration-fast, 150ms) ease, fill var(--duration-fast, 150ms) ease;
}

.mydraft-svg-icon path,
.mydraft-svg-icon circle,
.mydraft-svg-icon rect,
.mydraft-svg-icon line,
.mydraft-svg-icon polyline,
.mydraft-svg-icon polygon {
  transition: stroke var(--duration-fast, 150ms) ease, fill var(--duration-fast, 150ms) ease;
}

/* Theme Adaptive Helpers */
.theme-text-adaptive {
  color: var(--theme-text) !important;
}

.theme-surface-adaptive {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

.theme-accent-adaptive {
  color: var(--theme-accent) !important;
}

.theme-border-adaptive {
  border-color: var(--theme-border) !important;
}

/* Logo dynamic theming */
.iss-logo-brand text {
  fill: var(--theme-text);
}

.iss-logo-brand .iss-logo-accent {
  fill: var(--theme-accent);
}