/* Backwards compatibility and global overrides */
:root{
  --ts-primary: var(--color-primary);
  --ts-dark: #121212;
  --ts-panel: var(--color-surface);
  --ts-muted: var(--color-muted);
}

html { background: var(--color-surface); }

.ts-navbar-custom { background: #ffffff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.ts-navbar-custom .text-dark { color: #212b36 !important; }

/* FIX: Override Tailwind's restrictive .container class (max-width: 28rem) from index.css to restore Bootstrap container sizing */
@media (min-width: 576px) { .container { max-width: 540px !important; } }
@media (min-width: 768px) { .container { max-width: 720px !important; } }
@media (min-width: 992px) { .container { max-width: 960px !important; } }
@media (min-width: 1200px) { .container { max-width: 1140px !important; } }
@media (min-width: 1400px) { .container { max-width: 1320px !important; } }