/* ═══════════════════════════════════════════════════
   LiteScale v3 — Color System Override
   Sage Green (#6B8F71) → Warm Copper (#D4783A)
   ═══════════════════════════════════════════════════ */

:root {
  --color-ivory: #FAF9F7;
  --color-ivory-deep: #F3F0EA;
  --color-cream: #EDE9E0;
  --color-ink: #1A1A1A;
  --color-ink-soft: #333333;
  --color-stone: #777777;
  --color-stone-light: #999999;
  --color-stone-dark: #555555;
  --color-sage: #D4783A;
  --color-sage-deep: #B8602A;
  --color-sage-muted: #E0A070;
  --color-sage-pale: #FDF0E6;
  --color-sage-glow: rgba(212, 120, 58, 0.10);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-hover: rgba(212, 120, 58, 0.3);
  --color-cta-dark: #2C1810;
  --font-display: "Noto Serif SC", "Source Serif 4", "Songti SC", Georgia, serif;
  --section-pad: 96px;
  --section-pad-mobile: 56px;
}

/* ── Text colors ────────────────────── */
.text-ink { color: #1A1A1A !important; }
.text-ink-soft { color: #333333 !important; }
.text-stone { color: #777777 !important; }
.text-stone-light { color: #999999 !important; }
.text-stone-dark { color: #555555 !important; }
.text-sage { color: #D4783A !important; }
.text-sage-deep { color: #B8602A !important; }
.text-sage-muted { color: #E0A070 !important; }
.text-sage-pale { color: #FDF0E6 !important; }
.\!text-sage-deep { color: #B8602A !important; }

/* ── Background colors ────────────────── */
.bg-ivory { background-color: #FAF9F7 !important; }
.bg-ivory-deep { background-color: #F3F0EA !important; }
.bg-sage { background-color: #D4783A !important; }
.bg-sage-deep { background-color: #B8602A !important; }
.bg-sage-pale { background-color: #FDF0E6 !important; }
.bg-sage-pale\/30 { background-color: rgba(253, 240, 230, 0.3) !important; }

/* ── Border colors ────────────────── */
.border-\[rgba\(140\,133\,121\,0\.08\)\] { border-color: rgba(0,0,0,0.08) !important; }
.border-\[rgba\(140\,133\,121\,0\.12\)\] { border-color: rgba(0,0,0,0.08) !important; }
.border-\[rgba\(107\,143\,113\,0\.15\)\] { border-color: rgba(212,120,58,0.15) !important; }

/* ── Primary Button → Black ────────────── */
.btn-primary {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background-color: #333333 !important;
  box-shadow: none !important;
}

/* ── Secondary Button ────────────── */
.btn-secondary {
  border-color: rgba(0,0,0,0.08) !important;
  color: #555555 !important;
}
.btn-secondary:hover {
  border-color: #D4783A !important;
  color: #D4783A !important;
}

/* ── Inverse Button (on dark bg) ────────────── */
.btn-inverse {
  background-color: #FFFFFF !important;
  color: #B8602A !important;
}

/* ── Card hover ────────────── */
.card:hover {
  border-color: rgba(212,120,58,0.25) !important;
  box-shadow: 0 8px 32px rgba(212,120,58,0.06) !important;
}

/* ── Tag ────────────── */
.tag {
  background-color: #FDF0E6 !important;
  color: #B8602A !important;
  border-color: rgba(212,120,58,0.2) !important;
}

/* ── Section heading ────────────── */
.section-heading__en {
  color: #B8602A !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* ── Process step dot ────────────── */
.process-step__dot {
  border-color: #B8602A !important;
  background-color: #FDF0E6 !important;
  color: #B8602A !important;
}

/* ── Form focus ────────────── */
.form-input:focus {
  border-color: #D4783A !important;
  --tw-ring-color: rgba(253, 240, 230, 1) !important;
}

/* ── Filter tag active ────────────── */
.filter-tag:hover, .filter-tag.is-active {
  background-color: #FDF0E6 !important;
  color: #B8602A !important;
  border-color: rgba(212,120,58,0.2) !important;
}

/* ── Prose links ────────────── */
.prose-litescale a { color: #B8602A !important; }
.prose-litescale a:hover { color: #D4783A !important; }
.prose-litescale code { color: #B8602A !important; }

/* ── Blog card hover ────────────── */
.blog-card:hover {
  border-color: rgba(212,120,58,0.25) !important;
  box-shadow: 0 8px 32px rgba(212,120,58,0.06) !important;
}

/* ── Pillar / value card hover ────────────── */
.pillar-card:hover, .value-card:hover {
  border-color: rgba(212,120,58,0.25) !important;
  box-shadow: 0 6px 24px rgba(212,120,58,0.06) !important;
}

/* ── Pagination ────────────── */
.pagination a:hover { background-color: #FDF0E6 !important; color: #B8602A !important; }
.pagination .current { background-color: #B8602A !important; }

/* ── Floating dot ────────────── */
.floating-dot { background-color: #D4783A !important; }

/* ── Grain overlay — lighter ────────────── */
.grain-overlay { opacity: 0.25 !important; }

/* ── Radial glow ────────────── */
.section-glow:before {
  background: radial-gradient(circle, rgba(212,120,58,0.06) 0%, transparent 70%) !important;
}
.bg-\[radial-gradient\(circle\,rgba\(107\,143\,113\,0\.08\)_0\%\,transparent_70\%\)\] {
  background-image: radial-gradient(circle, rgba(212,120,58,0.06) 0%, transparent 70%) !important;
}

/* ── Section spacing ────────────── */
@media (min-width: 768px) {
  .section { padding-top: 96px !important; padding-bottom: 96px !important; }
}

/* ── Comparison table header highlight ────────────── */
.comparison-table th.bg-sage-pale {
  background-color: #FDF0E6 !important;
}

/* ── Header nav hover ────────────── */
a:hover.text-sage-deep,
.hover\:text-sage-deep:hover,
.hover\:text-sage:hover {
  color: #B8602A !important;
}

/* ── Backdrop blur for header ────────────── */
.bg-\[rgba\(250\,250\,246\,0\.85\)\] {
  background-color: rgba(250,249,247,0.85) !important;
}

/* ── New utility: backdrop-blur-xl ────────────── */
.backdrop-blur-xl {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* ── Grid cols for new layouts ────────────── */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-\[3fr_2fr\] { grid-template-columns: 3fr 2fr; }
.grid-cols-\[5fr_4fr\] { grid-template-columns: 5fr 4fr; }

/* ── Gap utilities ────────────── */
.gap-7 { gap: 1.75rem; }
.gap-16 { gap: 4rem; }

/* ── Padding utilities ────────────── */
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-20 { padding-bottom: 5rem; }
.pt-24 { padding-top: 6rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }

/* ── Margin utilities ────────────── */
.mt-14 { margin-top: 3.5rem; }
.mb-3\.5 { margin-bottom: 0.875rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mt-0\.5 { margin-top: 0.125rem; }

/* ── Min-height ────────────── */
.min-h-\[70vh\] { min-height: 70vh; }

/* ── Width/max-width ────────────── */
.max-w-\[380px\] { max-width: 380px; }
.max-w-\[460px\] { max-width: 460px; }
.max-w-\[320px\] { max-width: 320px; }
.min-w-\[320px\] { min-width: 320px; }

/* ── Size utilities ────────────── */
.h-12 { height: 3rem; }
.w-12 { width: 3rem; }
.h-48 { height: 12rem; }

/* ── Border radius ────────────── */
.rounded-2xl { border-radius: 1rem; }
.rounded-pill { border-radius: 24px; }
.rounded-xl { border-radius: 12px; }

/* ── Font size ────────────── */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-\[56px\] { font-size: 56px; }
.text-\[44px\] { font-size: 44px; }
.text-\[17px\] { font-size: 17px; }

/* ── No underline ────────────── */
.no-underline { text-decoration: none !important; }

/* ── Shadows ────────────── */
.shadow-lg { box-shadow: 0 12px 40px rgba(0,0,0,0.08); }

/* ── Border specific ────────────── */
.border-\[rgba\(0\,0\,0\,0\.08\)\] { border-color: rgba(0,0,0,0.08); }
.border-\[rgba\(0\,0\,0\,0\.04\)\] { border-color: rgba(0,0,0,0.04); }
.border-\[rgba\(0\,0\,0\,0\.06\)\] { border-color: rgba(0,0,0,0.06); }
.border-\[rgba\(212\,120\,58\,0\.15\)\] { border-color: rgba(212,120,58,0.15); }
.border-\[rgba\(212\,120\,58\,0\.2\)\] { border-color: rgba(212,120,58,0.2); }

/* ── BG specific ────────────── */
.bg-\[rgba\(250\,249\,247\,0\.85\)\] { background-color: rgba(250,249,247,0.85); }
.bg-\[rgba\(212\,120\,58\,0\.15\)\] { background-color: rgba(212,120,58,0.15); }
.bg-\[radial-gradient\(circle\,rgba\(212\,120\,58\,0\.06\)_0\%\,transparent_70\%\)\] {
  background-image: radial-gradient(circle, rgba(212,120,58,0.06) 0%, transparent 70%);
}
.bg-\[\#1A1A1A\] { background-color: #1A1A1A; }
.bg-\[\#2C1810\] { background-color: #2C1810; }

/* ── Text opacity ────────────── */
.text-white\/65 { color: rgba(255,255,255,0.65); }
.text-white\/50 { color: rgba(255,255,255,0.5); }
.text-white\/25 { color: rgba(255,255,255,0.25); }

/* ── Border opacity ────────────── */
.border-white\/25 { border-color: rgba(255,255,255,0.25); }

/* ── Hover helpers ────────────── */
.hover\:bg-\[\#333\]:hover { background-color: #333; }
.hover\:bg-ivory:hover { background-color: #FAF9F7; }
.hover\:opacity-80:hover { opacity: 0.8; }
.hover\:text-sage-deep:hover { color: #B8602A !important; }