/* =========================================================================
   Theme tokens (RGB triplets so Tailwind opacity modifiers keep working)
   Light is the :root default, .dark overrides it.
   ========================================================================= */
:root {
  --c-page:     248 250 252;
  --c-surface:  255 255 255;
  --c-raised:   241 245 249;
  --c-line:     226 232 240;
  --c-edge:     203 213 225;
  --c-strong:   15 23 42;
  --c-body:     51 65 85;
  --c-muted:    100 116 139;
  --c-gold:     146 100 14;     /* darker gold = readable on white */
  --c-wordmark: 16 40 32;       /* deep green */
  --grad-a: #9a6a12;
  --grad-b: #c29a3c;
  --blob-a: rgba(200, 160, 72, .28);
  --blob-b: rgba(16, 120, 90, .18);
  --grid-line: rgba(15, 23, 42, .06);
  color-scheme: light;
}

html.dark {
  --c-page:     2 6 23;
  --c-surface:  15 23 42;
  --c-raised:   30 41 59;
  --c-line:     30 41 59;
  --c-edge:     51 65 85;
  --c-strong:   248 250 252;
  --c-body:     203 213 225;
  --c-muted:    148 163 184;
  --c-gold:     232 192 96;
  --c-wordmark: 244 236 210;    /* cream */
  --grad-a: #f3d98a;
  --grad-b: #c8a048;
  --blob-a: rgba(200, 160, 72, .20);
  --blob-b: rgba(20, 150, 110, .16);
  --grid-line: rgba(148, 163, 184, .07);
  color-scheme: dark;
}

/* Language-specific font */
html[lang="ar"] { --font-sans: 'Cairo'; }
html[lang="en"] { --font-sans: 'Inter'; }

[x-cloak] { display: none !important; }

/* Smooth cross-fade while switching theme (class added by main.js for ~400ms) */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease !important;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--c-page)); }
::-webkit-scrollbar-thumb { background: rgb(var(--c-edge)); border-radius: 8px; }

/* Decorative grid backdrop */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.blob-a { background: var(--blob-a); }
.blob-b { background: var(--blob-b); }

.text-gradient {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Logo wordmark */
.font-logo { font-family: 'Lora', Georgia, serif; letter-spacing: -.01em; }
.text-wordmark { color: rgb(var(--c-wordmark)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .875rem; padding: .8rem 1.6rem; font-weight: 800; font-size: .95rem;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-gold {
  background-image: linear-gradient(135deg, #f3d98a, #c8a048 55%, #b08a38);
  color: #102820;
  box-shadow: 0 10px 24px -10px rgba(200, 160, 72, .8);
}
.btn-gold:hover { filter: brightness(1.07); box-shadow: 0 14px 30px -10px rgba(200, 160, 72, .95); }

.btn-emerald {
  background-image: linear-gradient(135deg, #25705a, #102820);
  color: #f4ecd2;
  box-shadow: 0 10px 24px -10px rgba(16, 120, 90, .8);
}
.btn-emerald:hover { filter: brightness(1.15); }

.btn-ghost {
  border: 1px solid rgb(var(--c-edge)); color: rgb(var(--c-strong)); background: transparent;
}
.btn-ghost:hover { background: rgb(var(--c-raised)); border-color: rgb(var(--c-gold) / .6); }

/* ---------- Form fields ---------- */
.field {
  width: 100%; border-radius: .75rem; padding: .7rem 1rem;
  background: rgb(var(--c-page)); color: rgb(var(--c-strong));
  border: 1px solid rgb(var(--c-edge)); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: rgb(var(--c-muted) / .7); }
.field:focus { border-color: #c8a048; box-shadow: 0 0 0 3px rgba(200, 160, 72, .25); }
.field.has-error { border-color: #ef4444; }

/* Scroll-reveal helper (toggled by main.js) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}