/* CasinoTutor site-wide skin (DESIGN.md): off-white canvas, black/slate ink,
   orange brand (AA-safe shades for text and white-text fills), navy header/footer.
   Lives in the `legacy` cascade layer and is linked after bundle.css (main.php), so it
   overrides the legacy rules in app.css on equal specificity and still loses to Tailwind utilities.
   Colours go through var(--color-ds-*) tokens (never raw hex) so dark-mode.css can remap them. */
@layer legacy {


/* ---------- Base ---------- */
body {
  background-color: var(--color-ds-canvas);
  color: var(--color-ds-ink);
  font-family: 'Archivo', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Archivo', sans-serif;
  letter-spacing: -0.01em;
}
h1, .h1 { font-weight: 800; letter-spacing: -0.02em; }
::selection { background: #ffd8c1; color: #000000; }
table { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--color-ds-brand); outline-offset: 2px; }

/* ---------- Header / navigation (navy band) ---------- */
.fill-main { fill: var(--color-ds-brand); }

/* ---------- Footer (navy band) ---------- */

/* ---------- Cards & overlays ---------- */
.card { border-color: var(--color-ds-line); border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); }
.modal-content, .dropdown-menu, .popover {
  border: 1px solid var(--color-ds-line);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.modal-content { border-radius: 12px; }

/* ---------- Forms ---------- */
.ds-field, .ds-field { border-color: var(--color-ds-line); }
.ds-field:focus, .ds-field:focus {
  border-color: var(--color-ds-brand);
  box-shadow: var(--shadow-ds-glow);
}
.ds-field::placeholder { color: var(--color-ds-body); }
.ds-check:checked { background-color: var(--color-ds-brand); border-color: var(--color-ds-brand); }

/* ---------- Buttons ----------
   Every filled CTA is ONE solid orange (DESIGN.md): no gradients, no yellow/green/red/blue
   variants. var(--color-ds-brand) keeps white text at 4.85:1. Covers legacy colour classes and
   the btn-<?= $item->btn_visit_color ?> variants set per casino. */
.btn-primary, .btn-warning, .btn-yellow, .btn-orange, .btn-green, .btn-red, .btn-blue,
.btn-purple, .btn-brand-orange, .btn-y {
  background: var(--color-ds-brand-cta) !important;
  border-color: var(--color-ds-brand-cta) !important;
  color: var(--color-ds-on-cta) !important;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover, .btn-warning:hover, .btn-yellow:hover, .btn-orange:hover, .btn-green:hover,
.btn-red:hover, .btn-blue:hover, .btn-purple:hover, .btn-brand-orange:hover, .btn-y:hover {
  background: var(--color-ds-brand-cta-hover) !important;
  border-color: var(--color-ds-brand-cta-hover) !important;
  color: var(--color-ds-on-cta) !important;
  box-shadow: var(--shadow-ds-glow);
}
.btn-yellow .btn-icon-arrow, .btn-orange .btn-icon-arrow, .btn-green .btn-icon-arrow,
.btn-red .btn-icon-arrow, .btn-blue .btn-icon-arrow, .btn-primary .btn-icon-arrow,
.btn-yellow .fill-black, .btn-orange .fill-black, .btn-green .fill-black, .btn-warning .fill-black { fill: var(--color-ds-on-cta); }
/* The shimmer sweep on CTAs reads as a gradient: turn it off on buttons. */
:is(.ds-btn-primary, .ds-btn-outline).rating-progress-tt::after, a.rating-progress-tt::after, button.rating-progress-tt::after { content: none; }
.btn-outline-primary {
  background-color: var(--color-ds-surface) !important;
  border: 1px solid var(--color-ds-brand) !important;
  color: var(--color-ds-ink) !important;
  font-weight: 700;
  border-radius: 12px;
}
.btn-outline-primary:hover { background-color: var(--color-ds-brand-soft) !important; }

/* ---------- Tables ---------- */

/* ---------- Badges / pagination / tabs ---------- */
.badge { border-radius: 4px; letter-spacing: 0.04em; }
.swiper-pagination-bullet-active { background: var(--color-ds-brand); }

/* Gradient headline accent: AA-safe orange (raw var(--color-ds-brand) is 3.06:1 on white) */
.text-gradient-ct {
  background: linear-gradient(45deg, var(--color-ds-brand), var(--color-ds-brand-cta-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Long-form article body */




/* Contrast (PageSpeed/WCAG AA): raw Tailwind gray-400 text is 2.6:1 on white.
   Darken it on light surfaces; keep it on the navy header/footer. */
.text-gray-400, .\!text-gray-400 { color: var(--color-ds-body) !important; }

/* Active/hover main tab: same solid CTA orange as buttons (raw var(--color-ds-brand) + white = 3.06:1). */
.section-tabs-wrapper .cs-tab-main:is(.active, :hover) .cs-tabs-main-panels {
  background-color: var(--color-ds-brand-cta);
  color: var(--color-ds-on-cta);
}

/* Force Archivo everywhere: the legacy styles set Rubik / neo-sans / Playfair / Noto Sans on some elements.
   Icon fonts and code keep their own families. */
body *:not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(pre):not(kbd):not(samp) {
  font-family: 'Archivo', sans-serif !important;
}

} /* @layer legacy */