/*
 * tdkz-overrides.css — light theme palette matching t-d.kz (aspro_max)
 *
 * Strategy: load after mastbro.css and override critical Tailwind utility
 * outputs by re-defining the design tokens that drive them. Where mastbro
 * uses literal hex in component CSS we have to target those classes too.
 *
 * Palette (extracted from t-d.kz aspro_max):
 *   --tdkz-bg      #ffffff   page background
 *   --tdkz-ink     #1e2533   primary text
 *   --tdkz-mute    #6b7280   secondary text
 *   --tdkz-accent  #ffc93c   brand accent (yellow, from t-d.kz logo)
 *   --tdkz-accent2 #d4a020   hover/pressed accent
 *   --tdkz-soft    #f7f8fa   subtle background blocks
 *   --tdkz-border  #e5e7eb   neutral border
 */

:root {
  --tdkz-bg: #ffffff;
  --tdkz-ink: #1e2533;
  --tdkz-mute: #6b7280;
  --tdkz-accent: #ffc93c;
  --tdkz-accent2: #d4a020;
  --tdkz-soft: #f7f8fa;
  --tdkz-border: #e5e7eb;
}

/* ─── Body base ────────────────────────────────────────────────────────── */
body {
  background: var(--tdkz-bg) !important;
  color: var(--tdkz-ink) !important;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

/* ─── Recolor "brand" Tailwind class outputs that hardcode mastbro purple ─ */
.text-brand,
[class*="text-brand"] { color: var(--tdkz-accent) !important; }

.bg-brand,
[class*="bg-brand"]:not([class*="bg-brandlt"]) { background-color: var(--tdkz-accent) !important; color: var(--tdkz-ink) !important; }

.bg-brandlt { background-color: #fff8e0 !important; }

.border-brand,
[class*="border-brand"] { border-color: var(--tdkz-accent) !important; }

.hover\:bg-brand:hover { background-color: var(--tdkz-accent) !important; }
.hover\:border-brand:hover { border-color: var(--tdkz-accent) !important; }
.hover\:text-brand:hover { color: var(--tdkz-accent2) !important; }

/* Gradient hero used by mastbro home (purple→pink) → yellow→light */
.from-brandlt { --tw-gradient-from: #fff8e0 !important; }
.to-brand { --tw-gradient-to: var(--tdkz-accent) !important; }

/* ─── Links default to accent yellow with dark hover ───────────────────── */
a { color: var(--tdkz-ink); }
a:hover { color: var(--tdkz-accent2); }
.prose a { color: var(--tdkz-accent2) !important; text-decoration-color: var(--tdkz-accent) !important; }

/* ─── Headers: typographic adjustments to match aspro_max feel ─────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ─── Site header: white bg with subtle bottom border ──────────────────── */
header.sticky { background: var(--tdkz-bg) !important; border-bottom: 1px solid var(--tdkz-border) !important; }

/* ─── Buttons: aspro_max-style filled yellow CTA ───────────────────────── */
button.bg-brand,
.btn-primary,
[class*="bg-brand"]:not([class*="bg-brandlt"]) {
  color: var(--tdkz-ink) !important;
  font-weight: 700 !important;
}
button.bg-brand:hover,
.btn-primary:hover {
  background-color: var(--tdkz-accent2) !important;
}

/* ─── Reset mastbro's dark-mode CSS variables to light only ────────────── */
@media (prefers-color-scheme: dark) {
  body { background: var(--tdkz-bg) !important; color: var(--tdkz-ink) !important; }
}

/* ─── Custom Open Sans @font-face (preserved exact aspro_max files) ─────  */
@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('/themes/tdkz/assets/fonts/opensans/files/opensans-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  font-weight: 600;
  font-style: normal;
  src: url('/themes/tdkz/assets/fonts/opensans/files/opensans-semibold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  font-weight: 700;
  font-style: normal;
  src: url('/themes/tdkz/assets/fonts/opensans/files/opensans-bold.woff2') format('woff2');
  font-display: swap;
}

/* ─── Phone bar top: dark with yellow links (aspro_max signature) ──────── */
.bg-ink,
[class*="bg-ink"] {
  background-color: var(--tdkz-ink) !important;
}
.text-ink,
[class*="text-ink"] {
  color: var(--tdkz-ink) !important;
}

/* ─── Sticky breadcrumbs / nav: lighter look ───────────────────────────── */
.bg-soft, [class*="bg-soft"] { background-color: var(--tdkz-soft) !important; }
.text-mute, [class*="text-mute"] { color: var(--tdkz-mute) !important; }
.border-mute, [class*="border-mute"] { border-color: var(--tdkz-border) !important; }