/* ═══════════════════════════════════════════════
   SUNCITY ROYAL CASTLE — THEME TOKENS
   Central control file: every colour the site uses
   lives here. `:root` = dark (default), the
   `data-theme="light"` block = light.
   css/style.css consumes these via var() only.
   ═══════════════════════════════════════════════ */

:root {
  /* ── Core palette (dark) ─────────────────── */
  --bg:        oklch(0.135 0.014 262);
  --bg-2:      oklch(0.165 0.018 264);
  --card:      oklch(0.195 0.02 264);
  --card-2:    oklch(0.225 0.022 264);
  --ink:       oklch(0.955 0.012 90);
  --muted:     oklch(0.78 0.02 90 / 0.72);
  --faint:     oklch(0.78 0.02 90 / 0.45);
  --gold:      oklch(0.82 0.125 88);
  --gold-2:    oklch(0.7 0.12 74);
  --gold-ink:  oklch(0.24 0.06 80);
  --line:      oklch(0.82 0.125 88 / 0.16);
  --line-soft: oklch(0.82 0.125 88 / 0.09);
  --shadow:    0 24px 60px -24px oklch(0 0 0 / 0.55);

  /* ── Brand-gold alpha washes ─────────────── */
  --gold-a02:  oklch(0.82 0.125 88 / 0.02);
  --gold-a05:  oklch(0.82 0.125 88 / 0.05);
  --gold-a06:  oklch(0.82 0.125 88 / 0.06);
  --gold-a07:  oklch(0.82 0.125 88 / 0.07);
  --gold-a08:  oklch(0.82 0.125 88 / 0.08);
  --gold-a10:  oklch(0.82 0.125 88 / 0.1);
  --gold-a12:  oklch(0.82 0.125 88 / 0.12);
  --gold-a15:  oklch(0.82 0.125 88 / 0.15);

  /* ── Composed surfaces ───────────────────── */
  --body-bg:
    radial-gradient(60rem 40rem at 85% -10%, oklch(0.28 0.06 80 / 0.22), transparent 60%),
    radial-gradient(50rem 36rem at -10% 30%, oklch(0.24 0.04 264 / 0.5), transparent 60%),
    var(--bg);
  --glass-bg:
    linear-gradient(150deg, var(--gold-a06), var(--gold-a02) 45%), oklch(0.17 0.018 263 / 0.75);
  --chip-bg:        oklch(0.135 0.014 262 / 0.55);
  --nav-stuck-bg:   oklch(0.135 0.014 262 / 0.78);
  --mobilemenu-bg:  oklch(0.135 0.014 262 / 0.97);
  --totop-bg:       oklch(0.17 0.018 263 / 0.8);
  --field-bg:       oklch(0.135 0.014 262 / 0.5);
  --lightbox-bg:    oklch(0.1 0.01 262 / 0.92);
  --lightbox-btn-bg: oklch(0.17 0.018 263 / 0.6);

  /* ── Bands & veils ───────────────────────── */
  --hero-veil:
    linear-gradient(180deg, oklch(0.135 0.014 262 / 0.75), oklch(0.135 0.014 262 / 0.45) 40%, var(--bg) 96%),
    radial-gradient(70rem 50rem at 15% 60%, oklch(0.135 0.014 262 / 0.55), transparent 65%);
  --planner-band: linear-gradient(180deg, transparent, oklch(0.19 0.022 264 / 0.5), transparent);
  --contact-band: linear-gradient(180deg, transparent, oklch(0.19 0.022 264 / 0.55));
  --ticker-bg:    linear-gradient(90deg, oklch(0.3 0.07 82 / 0.35), oklch(0.24 0.05 80 / 0.35));
  --ticker-ink:   oklch(0.88 0.07 92 / 0.9);

  /* ── Type & accents ──────────────────────── */
  --title-grad:    linear-gradient(100deg, var(--gold) 20%, oklch(0.9 0.09 95) 55%, var(--gold-2));
  --sel-bg:        oklch(0.82 0.125 88 / 0.85);
  --sel-ink:       oklch(0.2 0.05 80);
  --err-border:    oklch(0.65 0.19 25);
  --err-ink:       oklch(0.7 0.17 25);
  --success-bg:    linear-gradient(160deg, oklch(0.24 0.05 150 / 0.92), oklch(0.19 0.03 264 / 0.96));
  --success-ico:   oklch(0.82 0.14 150);

  /* ── Controls ────────────────────────────── */
  --thumb-highlight: oklch(0.95 0.06 95);
  --thumb-border:    oklch(0.3 0.06 80);
  --thumb-shadow:    0 4px 14px oklch(0.75 0.12 85 / 0.5);
  --interest-bar:    oklch(0.4 0.03 264 / 0.9);
  --dot-dim:         oklch(0.45 0.03 264);

  /* ── Gold glows ──────────────────────────── */
  --shadow-gold:       0 10px 30px -10px oklch(0.75 0.12 85 / 0.5);
  --shadow-gold-hover: 0 16px 38px -12px oklch(0.75 0.12 85 / 0.65);

  /* ── Over-photo constants (same in both themes —
        these sit on photography, not on the page) ── */
  --photo-chip-bg:   oklch(0.14 0.014 262 / 0.65);
  --card-fade:       linear-gradient(180deg, transparent 55%, oklch(0.165 0.018 264 / 0.9));
  --tag-alt-bg:      oklch(0.22 0.03 264 / 0.85);
  --strip-scrim:     linear-gradient(180deg, oklch(0.14 0.014 262 / 0.1) 30%, oklch(0.14 0.014 262 / 0.85));
  --strip-ink:       oklch(0.88 0.02 90 / 0.88);
  --photo-text-shadow: 0 2px 12px oklch(0 0 0 / 0.6);
  --photo-ink:       oklch(0.96 0.012 90);
  --photo-gold:      oklch(0.82 0.125 88);

  /* ── WhatsApp ────────────────────────────── */
  --wa-grad:   linear-gradient(135deg, oklch(0.7 0.13 155), oklch(0.55 0.12 155));
  --wa-ink:    oklch(0.98 0.01 155);
  --wa-shadow: 0 12px 30px -8px oklch(0.5 0.12 155 / 0.6);

  /* ── Shared, non-colour tokens ───────────── */
  --radius: 1.25rem;
  --serif:  "Cormorant Garamond", Georgia, serif;
  --sans:   "Outfit", system-ui, -apple-system, sans-serif;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h:  4.5rem;

  color-scheme: dark;
}

/* ═══════════════ LIGHT THEME ═══════════════
   Warm ivory & antique gold. Only overrides what
   differs — over-photo constants inherit.        */
html[data-theme="light"] {
  /* ── Core palette ──────────────────────── */
  --bg:        oklch(0.972 0.011 92);
  --bg-2:      oklch(0.945 0.015 90);
  --card:      oklch(0.985 0.007 95);
  --card-2:    oklch(0.998 0.003 100);
  --ink:       oklch(0.26 0.035 78);
  --muted:     oklch(0.42 0.03 78 / 0.82);
  --faint:     oklch(0.42 0.03 78 / 0.55);
  --gold:      oklch(0.52 0.105 72);
  --gold-2:    oklch(0.42 0.095 62);
  --gold-ink:  oklch(0.985 0.008 95);
  --line:      oklch(0.5 0.08 75 / 0.28);
  --line-soft: oklch(0.5 0.08 75 / 0.15);
  --shadow:    0 24px 60px -28px oklch(0.4 0.06 75 / 0.3);

  /* ── Brand-gold washes (antique base; slightly
        higher alpha to read on ivory) ───────── */
  --gold-a02:  oklch(0.52 0.105 72 / 0.03);
  --gold-a05:  oklch(0.52 0.105 72 / 0.06);
  --gold-a06:  oklch(0.52 0.105 72 / 0.07);
  --gold-a07:  oklch(0.52 0.105 72 / 0.09);
  --gold-a08:  oklch(0.52 0.105 72 / 0.1);
  --gold-a10:  oklch(0.52 0.105 72 / 0.13);
  --gold-a12:  oklch(0.52 0.105 72 / 0.16);
  --gold-a15:  oklch(0.52 0.105 72 / 0.22);

  /* ── Composed surfaces ─────────────────── */
  --body-bg:
    radial-gradient(60rem 40rem at 85% -10%, oklch(0.88 0.06 85 / 0.35), transparent 60%),
    radial-gradient(50rem 36rem at -10% 30%, oklch(0.93 0.025 92 / 0.5), transparent 60%),
    var(--bg);
  --glass-bg:
    linear-gradient(150deg, oklch(1 0 95 / 0.9), oklch(0.965 0.012 92 / 0.75) 45%), oklch(0.99 0.004 95 / 0.85);
  --chip-bg:         oklch(0.99 0.005 95 / 0.75);
  --nav-stuck-bg:    oklch(0.972 0.011 92 / 0.82);
  --mobilemenu-bg:   oklch(0.972 0.011 92 / 0.97);
  --totop-bg:        oklch(0.99 0.005 95 / 0.85);
  --field-bg:        oklch(0.995 0.004 95 / 0.8);
  --lightbox-bg:     oklch(0.965 0.01 90 / 0.95);
  --lightbox-btn-bg: oklch(0.99 0.004 95 / 0.75);

  /* ── Bands & veils ─────────────────────── */
  --hero-veil:
    linear-gradient(180deg, oklch(0.972 0.011 92 / 0.78), oklch(0.972 0.011 92 / 0.45) 40%, var(--bg) 96%),
    radial-gradient(70rem 50rem at 15% 60%, oklch(0.972 0.011 92 / 0.45), transparent 65%);
  --planner-band: linear-gradient(180deg, transparent, oklch(0.9 0.05 88 / 0.55), transparent);
  --contact-band: linear-gradient(180deg, transparent, oklch(0.9 0.05 88 / 0.5));
  --ticker-bg:    linear-gradient(90deg, oklch(0.88 0.06 85 / 0.5), oklch(0.93 0.04 90 / 0.5));
  --ticker-ink:   oklch(0.42 0.05 70 / 0.9);

  /* ── Type & accents ────────────────────── */
  --title-grad:  linear-gradient(100deg, oklch(0.5 0.11 70) 20%, oklch(0.63 0.1 82) 55%, var(--gold-2));
  --sel-bg:      oklch(0.82 0.125 88 / 0.55);
  --sel-ink:     oklch(0.25 0.05 75);
  --err-ink:     oklch(0.52 0.19 25);
  --success-bg:  linear-gradient(160deg, oklch(0.93 0.05 150 / 0.95), oklch(0.98 0.008 95 / 0.97));
  --success-ico: oklch(0.55 0.14 150);

  color-scheme: light;
}