/* Semantic theme variables — light & dark via html[data-theme] */

html[data-theme="light"] {
  --color-bg: var(--gray-50);
  --color-bg-elevated: var(--white);
  --color-bg-alt: var(--navy-50);
  --color-bg-muted: var(--gray-100);
  --color-surface: var(--white);
  --color-surface-hover: var(--gray-50);

  --color-text: var(--navy-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: var(--white);

  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-divider: var(--gray-100);

  --color-primary: var(--navy-800);
  --color-primary-hover: var(--navy-900);
  --color-accent: var(--teal-600);
  --color-accent-hover: var(--teal-700);
  --color-accent-soft: var(--teal-100);

  --color-success: var(--green-600);
  --color-success-soft: var(--green-100);
  --color-danger: var(--red-600);
  --color-danger-soft: var(--red-100);
  --color-warning: var(--amber-600);
  --color-warning-soft: var(--amber-100);
  --color-info: var(--blue-500);
  --color-info-soft: var(--blue-100);

  --color-navbar-bg: rgba(255, 255, 255, 0.85);
  --color-navbar-border: rgba(10, 22, 40, 0.08);
  --color-hero-gradient-from: #e8f4f3;
  --color-hero-gradient-to: #eef3f9;
  --color-orb-1: rgba(20, 184, 166, 0.18);
  --color-orb-2: rgba(15, 33, 64, 0.1);
  --color-grid: rgba(15, 33, 64, 0.06);

  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.05);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 12px 40px rgba(10, 22, 40, 0.12);
  --shadow-xl: 0 24px 64px rgba(10, 22, 40, 0.16);
  --shadow-glow: 0 0 40px rgba(20, 184, 166, 0.2);

  --gradient-text: linear-gradient(135deg, var(--teal-600), var(--navy-600));
  --gradient-cta: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  --gradient-btn: linear-gradient(135deg, var(--teal-600), var(--teal-700));

  /* Dashboard / library semantic aliases */
  --color-background: var(--color-bg);
  --color-foreground: var(--color-text);
  --color-muted: var(--color-text-muted);
  --color-text-soft: var(--color-text-secondary);
  --color-surface-soft: var(--gray-50);
  --color-surface-soft-strong: var(--gray-100);
  --color-surface-900: var(--navy-900);
  --color-accent-muted: rgba(15, 138, 143, 0.12);
  --color-accent-ghost: rgba(15, 138, 143, 0.08);
  --color-accent-contrast: var(--white);
  --color-overlay: rgba(10, 22, 40, 0.45);
  --color-overlay-soft: rgba(10, 22, 40, 0.28);
  --color-panel-border-soft: rgba(10, 22, 40, 0.08);
  --color-danger-border-soft: rgba(220, 38, 38, 0.25);
  --color-danger-text-soft: #b91c1c;
  --color-danger-text-strong: #991b1b;
  --color-info-glow: rgba(59, 130, 246, 0.18);
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(10, 22, 40, 0.1);
  --gradient-dashboard-shell: linear-gradient(180deg, #eef3f9 0%, #f5f7fa 42%, #f8fafc 100%);
  --gradient-brand: linear-gradient(135deg, var(--navy-800), var(--teal-600));
  --gradient-accent: linear-gradient(135deg, var(--teal-500), var(--teal-600));
  --shadow-accent: 0 8px 24px rgba(15, 138, 143, 0.18);
  --shadow-card: var(--shadow-md);
  --shadow-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] {
  --color-bg: var(--navy-950);
  --color-bg-elevated: var(--navy-900);
  --color-bg-alt: var(--navy-900);
  --color-bg-muted: var(--navy-800);
  --color-surface: var(--navy-800);
  --color-surface-hover: var(--navy-700);

  --color-text: var(--navy-50);
  --color-text-secondary: var(--navy-200);
  --color-text-muted: var(--navy-300);
  --color-text-inverse: var(--navy-950);

  --color-border: rgba(168, 192, 222, 0.12);
  --color-border-strong: rgba(168, 192, 222, 0.22);
  --color-divider: rgba(168, 192, 222, 0.08);

  --color-primary: var(--teal-500);
  --color-primary-hover: var(--teal-400);
  --color-accent: var(--teal-400);
  --color-accent-hover: var(--teal-300);
  --color-accent-soft: rgba(45, 212, 191, 0.12);

  --color-success: var(--green-500);
  --color-success-soft: rgba(16, 185, 129, 0.15);
  --color-danger: var(--red-500);
  --color-danger-soft: rgba(239, 68, 68, 0.15);
  --color-warning: var(--amber-500);
  --color-warning-soft: rgba(245, 158, 11, 0.15);
  --color-info: var(--blue-500);
  --color-info-soft: rgba(59, 130, 246, 0.15);

  --color-navbar-bg: rgba(6, 13, 26, 0.85);
  --color-navbar-border: rgba(168, 192, 222, 0.1);
  --color-hero-gradient-from: #060d1a;
  --color-hero-gradient-to: #0a1628;
  --color-orb-1: rgba(45, 212, 191, 0.12);
  --color-orb-2: rgba(61, 106, 168, 0.15);
  --color-grid: rgba(168, 192, 222, 0.04);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 48px rgba(45, 212, 191, 0.15);

  --gradient-text: linear-gradient(135deg, var(--teal-400), var(--teal-200));
  --gradient-cta: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  --gradient-btn: linear-gradient(135deg, var(--teal-500), var(--teal-600));

  /* Dashboard / library semantic aliases */
  --color-background: var(--color-bg);
  --color-foreground: var(--color-text);
  --color-muted: var(--color-text-muted);
  --color-text-soft: var(--color-text-secondary);
  --color-surface-soft: rgba(15, 33, 64, 0.65);
  --color-surface-soft-strong: rgba(22, 48, 86, 0.85);
  --color-surface-900: var(--navy-900);
  --color-accent-muted: rgba(45, 212, 191, 0.14);
  --color-accent-ghost: rgba(45, 212, 191, 0.08);
  --color-accent-contrast: var(--navy-950);
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-overlay-soft: rgba(0, 0, 0, 0.4);
  --color-panel-border-soft: rgba(168, 192, 222, 0.1);
  --color-danger-border-soft: rgba(239, 68, 68, 0.3);
  --color-danger-text-soft: #fca5a5;
  --color-danger-text-strong: #fecaca;
  --color-info-glow: rgba(59, 130, 246, 0.22);
  --glass-bg: rgba(10, 22, 40, 0.82);
  --glass-border: rgba(168, 192, 222, 0.14);
  --gradient-dashboard-shell: linear-gradient(180deg, #060d1a 0%, #0a1628 48%, #0f2140 100%);
  --gradient-brand: linear-gradient(135deg, var(--teal-400), var(--navy-500));
  --gradient-accent: linear-gradient(135deg, var(--teal-400), var(--teal-500));
  --shadow-accent: 0 8px 28px rgba(45, 212, 191, 0.16);
  --shadow-card: var(--shadow-md);
  --shadow-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Fallback when data-theme missing — mirror light + dashboard aliases */
html:not([data-theme]) {
  --color-bg: var(--gray-50);
  --color-bg-elevated: var(--white);
  --color-bg-alt: var(--navy-50);
  --color-bg-muted: var(--gray-100);
  --color-surface: var(--white);
  --color-surface-hover: var(--gray-50);
  --color-text: var(--navy-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: var(--white);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-divider: var(--gray-100);
  --color-primary: var(--navy-800);
  --color-primary-hover: var(--navy-900);
  --color-accent: var(--teal-600);
  --color-accent-hover: var(--teal-700);
  --color-accent-soft: var(--teal-100);
  --color-success: var(--green-600);
  --color-success-soft: var(--green-100);
  --color-danger: var(--red-600);
  --color-danger-soft: var(--red-100);
  --color-warning: var(--amber-600);
  --color-warning-soft: var(--amber-100);
  --color-info: var(--blue-500);
  --color-info-soft: var(--blue-100);
  --color-navbar-bg: rgba(255, 255, 255, 0.85);
  --color-navbar-border: rgba(10, 22, 40, 0.08);
  --color-hero-gradient-from: #e8f4f3;
  --color-hero-gradient-to: #eef3f9;
  --color-orb-1: rgba(20, 184, 166, 0.18);
  --color-orb-2: rgba(15, 33, 64, 0.1);
  --color-grid: rgba(15, 33, 64, 0.06);
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.05);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 12px 40px rgba(10, 22, 40, 0.12);
  --shadow-xl: 0 24px 64px rgba(10, 22, 40, 0.16);
  --shadow-glow: 0 0 40px rgba(20, 184, 166, 0.2);
  --gradient-text: linear-gradient(135deg, var(--teal-600), var(--navy-600));
  --gradient-cta: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  --gradient-btn: linear-gradient(135deg, var(--teal-600), var(--teal-700));
  --color-background: var(--color-bg);
  --color-foreground: var(--color-text);
  --color-muted: var(--color-text-muted);
  --color-text-soft: var(--color-text-secondary);
  --color-surface-soft: var(--gray-50);
  --color-surface-soft-strong: var(--gray-100);
  --color-surface-900: var(--navy-900);
  --color-accent-muted: rgba(15, 138, 143, 0.12);
  --color-accent-ghost: rgba(15, 138, 143, 0.08);
  --color-accent-contrast: var(--white);
  --color-overlay: rgba(10, 22, 40, 0.45);
  --color-overlay-soft: rgba(10, 22, 40, 0.28);
  --color-panel-border-soft: rgba(10, 22, 40, 0.08);
  --color-danger-border-soft: rgba(220, 38, 38, 0.25);
  --color-danger-text-soft: #b91c1c;
  --color-danger-text-strong: #991b1b;
  --color-info-glow: rgba(59, 130, 246, 0.18);
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(10, 22, 40, 0.1);
  --gradient-dashboard-shell: linear-gradient(180deg, #eef3f9 0%, #f5f7fa 42%, #f8fafc 100%);
  --gradient-brand: linear-gradient(135deg, var(--navy-800), var(--teal-600));
  --gradient-accent: linear-gradient(135deg, var(--teal-500), var(--teal-600));
  --shadow-accent: 0 8px 24px rgba(15, 138, 143, 0.18);
  --shadow-card: var(--shadow-md);
  --shadow-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}