/*
 * IslamicWisdoms theme — CSS tokens + custom utilities.
 * Ported from src/styles.css. Tailwind utilities used in the markup are
 * provided at runtime by the Tailwind CDN (registered in inc/enqueue.php),
 * so this file only carries theme tokens, custom @utility ports, base
 * styles, and animations.
 */

:root {
  --radius: 0.9rem;
  --background: oklch(0.19 0.04 165);
  --surface: oklch(0.245 0.045 165);
  --surface-2: oklch(0.29 0.05 165);
  --foreground: oklch(0.96 0.015 90);
  --card: oklch(0.245 0.045 165);
  --card-foreground: oklch(0.96 0.015 90);
  --primary: oklch(0.78 0.13 82);
  --primary-foreground: oklch(0.19 0.04 165);
  --gold: oklch(0.78 0.13 82);
  --gold-soft: oklch(0.86 0.09 85);
  --gold-dim: oklch(0.55 0.09 82);
  --muted: oklch(0.29 0.05 165);
  --muted-foreground: oklch(0.75 0.02 90);
  --accent: oklch(0.78 0.13 82);
  --accent-foreground: oklch(0.19 0.04 165);
  --border: oklch(0.35 0.04 165);
  --border-gold: oklch(0.55 0.11 82 / 0.4);
  --input: oklch(0.32 0.04 165);
  --ring: oklch(0.78 0.13 82);

  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-arabic: "Amiri", "Scheherazade New", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

html:not(.dark) {
  --background: #f8faf9;
  --surface: #ffffff;
  --surface-2: #f0f4f2;
  --foreground: #122921;
  --card: #ffffff;
  --card-foreground: #122921;
  --primary: #c8a44d;
  --primary-foreground: #ffffff;
  --gold: #b38b2d;
  --gold-soft: #c8a44d;
  --gold-dim: #8a6a2b;
  --muted: #e2e8e5;
  --muted-foreground: #4a6358;
  --accent: #c8a44d;
  --accent-foreground: #ffffff;
  --border: #d1dc8;
  --border-gold: rgba(179, 139, 45, 0.4);
  --input: #e2e8e5;
  --ring: #c8a44d;
  color-scheme: light;
}

html {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  color-scheme: dark;
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
::selection {
  background: color-mix(in oklab, var(--gold) 40%, transparent);
  color: var(--foreground);
}

/* --------- Semantic color helpers (matches Tailwind @theme mapping) --------- */
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary-foreground { color: var(--primary-foreground); }
.bg-background { background-color: var(--background); }
.bg-surface { background-color: var(--surface); }
.bg-surface-2 { background-color: var(--surface-2); }
.bg-card { background-color: var(--card); }
.text-gold { color: var(--gold); }
.text-gold-soft { color: var(--gold-soft); }
.bg-gold { background-color: var(--gold); }
.border-border-gold { border-color: var(--border-gold); }
.ring-border-gold { --tw-ring-color: var(--border-gold); box-shadow: 0 0 0 1px var(--border-gold); }
.font-display { font-family: var(--font-display); }
.font-arabic  { font-family: var(--font-arabic); }
.font-sans    { font-family: var(--font-sans); }

/* --------- Custom utilities ported from src/styles.css --------- */
.container-page {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.gradient-gold {
  background-image: linear-gradient(135deg, var(--gold-soft), var(--gold) 45%, var(--gold-dim));
}

.text-gradient-gold {
  background-image: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, #8a6a2b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ring-gold {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent);
}

.card-emerald {
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, black) 0%, var(--surface) 100%);
  border: 1px solid color-mix(in oklab, var(--gold) 18%, transparent);
  border-radius: calc(var(--radius) + 8px);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--gold) 12%, transparent) inset,
    0 20px 40px -30px rgba(0, 0, 0, 0.6);
}

.hero-glow {
  background-image:
    radial-gradient(1200px 500px at 80% 0%, color-mix(in oklab, var(--gold) 18%, transparent), transparent 60%),
    radial-gradient(800px 400px at 0% 100%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 60%);
}

.divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 60%, transparent), transparent);
}

.pattern-bg {
  background-image: radial-gradient(color-mix(in oklab, var(--gold) 8%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

.fade-up { animation: fadeUp 0.6s ease-out both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hover-lift { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.hover-lift:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--gold) 45%, transparent);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in oklab, var(--gold) 25%, transparent);
}

/* WP-specific bits */
.iw-menu { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 0.25rem; }
.iw-menu ul { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 0.25rem; }
.iw-menu li { display: inline-block; }
.iw-menu a { display: inline-block; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); transition: color 0.2s; }
.iw-menu a:hover, .iw-menu .current-menu-item > a { color: var(--gold); }

.iw-menu-vertical { flex-direction: column; align-items: stretch; }
.iw-menu-vertical li { display: block; }

/* WP core alignment/gallery/caption */
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }