/* =========================================
   Global Theme Sprite Layer
   Token-driven visuals for shared SpriteUI primitives
   Depends on sprites.css
   ========================================= */

:root,
[data-theme] {
  --nx-theme-bg: var(--nx-color-bg, #ffffff);
  --nx-theme-bg-soft: var(--nx-color-bg-soft, #f6f8fc);
  --nx-theme-bg-elevated: var(--nx-color-bg-elevated, #ffffff);

  --nx-theme-text: var(--nx-color-text, #07111f);
  --nx-theme-text-soft: var(--nx-color-text-soft, #334155);
  --nx-theme-text-muted: var(--nx-color-text-muted, #64748b);
  --nx-theme-heading: var(--nx-color-heading, #001b78);

  --nx-theme-border: var(--nx-color-border, rgba(15, 23, 42, 0.10));
  --nx-theme-border-strong: var(--nx-color-border-strong, rgba(15, 23, 42, 0.18));

  --nx-theme-shadow: var(--nx-shadow-md, 0 16px 32px rgba(15, 23, 42, 0.10));
  --nx-theme-shadow-soft: var(--nx-shadow-sm, 0 8px 18px rgba(15, 23, 42, 0.08));

  --nx-theme-accent: var(--nx-color-accent, #ffc107);
  --nx-theme-accent-soft: var(--nx-color-accent-soft, rgba(255, 193, 7, 0.16));
  --nx-theme-accent-border: var(--nx-color-accent-border, rgba(255, 193, 7, 0.32));
  --nx-theme-accent-2: var(--nx-color-accent-2, #006dff);
  --nx-theme-accent-2-soft: var(--nx-color-accent-2-soft, rgba(0, 109, 255, 0.12));

  --nx-theme-button-bg: var(--nx-theme-accent-2-soft);
  --nx-theme-button-bg-hover: rgba(0, 109, 255, 0.14);
  --nx-theme-button-text: #001b78;

  --nx-theme-hero-bg: var(--nx-color-dark-surface-soft, rgba(15, 23, 42, 0.82));
  --nx-theme-hero-border: var(--nx-color-dark-border, rgba(255, 255, 255, 0.12));
  --nx-theme-hero-text: var(--nx-color-dark-text, #f8fafc);
  --nx-theme-hero-text-soft: var(--nx-color-dark-text-soft, #cbd5e1);
}

/* Container */
[data-theme] .nx-container {
  color: var(--nx-theme-text);
}

/* Grid / stack */
[data-theme] .nx-grid {
  align-items: start;
}

[data-theme] .nx-stack {
  align-items: stretch;
}

/* Panels */
[data-theme] .nx-panel {
  background: var(--nx-theme-bg-elevated);
  border: 1px solid var(--nx-theme-border);
  box-shadow: none;
  color: var(--nx-theme-text);
}

[data-theme] .nx-panel--sm {
  background: var(--nx-theme-bg-soft);
}

[data-theme] .nx-panel--lg,
[data-theme] .nx-panel--xl {
  border-color: var(--nx-theme-border-strong);
}

/* Cards */
[data-theme] .nx-card {
  background: var(--nx-theme-bg-elevated);
  border: 1px solid var(--nx-theme-border);
  box-shadow: none;
  color: var(--nx-theme-text);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

[data-theme] .nx-card:hover {
  border-color: var(--nx-theme-accent-border);
  box-shadow: none;
  transform: none;
}

[data-theme] .nx-card--compact {
  background: var(--nx-theme-bg-soft);
}

[data-theme] .nx-card--spacious,
[data-theme] .nx-card--hero {
  border-color: var(--nx-theme-border-strong);
}

/* Toolbar */
[data-theme] .nx-toolbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  color: var(--nx-theme-text);
}

[data-theme] .nx-toolbar__group {
  color: var(--nx-theme-text);
}

/* Semantic helpers */
[data-theme] .nx-surface-soft {
  background: var(--nx-theme-bg-soft);
}

[data-theme] .nx-surface-accent {
  background: var(--nx-theme-accent-soft);
  border-color: var(--nx-theme-accent-border);
}

[data-theme] .nx-text-soft {
  color: var(--nx-theme-text-soft);
}

[data-theme] .nx-text-muted {
  color: var(--nx-theme-text-muted);
}

[data-theme] .nx-border-accent {
  border-color: var(--nx-theme-accent-border);
}

[data-theme] .nx-shadow-none {
  box-shadow: none;
}

/* Buttons inside sprite surfaces */
[data-theme] .nx-toolbar button,
[data-theme] .nx-card button,
[data-theme] .nx-panel button {
  border: 0;
  background: var(--nx-theme-button-bg);
  color: var(--nx-theme-button-text);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

[data-theme] .nx-toolbar button:hover,
[data-theme] .nx-card button:hover,
[data-theme] .nx-panel button:hover {
  background: var(--nx-theme-button-bg-hover);
  border-color: transparent;
}

[data-theme] .nx-toolbar button:active,
[data-theme] .nx-card button:active,
[data-theme] .nx-panel button:active {
  transform: none;
}

/* Typography inside sprite surfaces */
[data-theme] .nx-card h1,
[data-theme] .nx-card h2,
[data-theme] .nx-card h3,
[data-theme] .nx-panel h1,
[data-theme] .nx-panel h2,
[data-theme] .nx-panel h3 {
  color: var(--nx-theme-heading);
  margin-top: 0;
}

[data-theme] .nx-card p,
[data-theme] .nx-panel p,
[data-theme] .nx-toolbar p {
  color: var(--nx-theme-text-soft);
}

/* Dark hero protection */
[data-theme] .nx-wide-hero .nx-card,
[data-theme] .nx-wide-hero .nx-panel {
  background: var(--nx-theme-hero-bg);
  border-color: var(--nx-theme-hero-border);
  color: var(--nx-theme-hero-text);
}

[data-theme] .nx-wide-hero .nx-card h1,
[data-theme] .nx-wide-hero .nx-card h2,
[data-theme] .nx-wide-hero .nx-card h3,
[data-theme] .nx-wide-hero .nx-panel h1,
[data-theme] .nx-wide-hero .nx-panel h2,
[data-theme] .nx-wide-hero .nx-panel h3 {
  color: var(--nx-theme-hero-text);
}

[data-theme] .nx-wide-hero .nx-card p,
[data-theme] .nx-wide-hero .nx-panel p,
[data-theme] .nx-wide-hero .nx-text-muted {
  color: var(--nx-theme-hero-text-soft);
}