/* =====================================================================
   Hawiyah · Theme system (Dark = positive · Light = negative)
   Loaded AFTER colors_and_type.css and site.css.
   Toggling html[data-theme="light"] flips the entire palette.
   ===================================================================== */

:root {
  /* Surfaces & foreground (DARK is default) */
  --surface:        var(--ink);            /* page bg */
  --surface-card:   var(--ink-card);       /* cards */
  --surface-elev:   #0d0d0d;               /* slightly raised */
  --nav-bg:         rgba(10,10,10,.55);
  --nav-shadow:     0 1px 0 rgba(255,255,255,.04);

  /* Vibrant accent — one per design. Default Sky Blue. */
  --vibrant: var(--sky);

  --fg:             #FFFFFF;
  --fg-soft:        rgba(255,255,255,.72);
  --fg-muted:       rgba(255,255,255,.55);
  --fg-faint:       rgba(255,255,255,.35);
  --fg-faintest:    rgba(255,255,255,.12);

  --line:           rgba(255,255,255,.10);
  --line-strong:    rgba(255,255,255,.18);
  --line-faint:     rgba(255,255,255,.06);

  --wave-url:       url("assets/patterns/wave_white.svg");
  --wave-opacity:   .22;            /* boosted from .10 — brand spec allows 8-22% */
  --wave-blend:     screen;

  --orb-src:        url("assets/logos/symbol_white.svg");
  --orb-decoration: invert(0);

  --hover-purple-tint: rgba(93,67,145,.08);
  --hover-on-surface:  rgba(255,255,255,.06);
}

html[data-theme="light"] {
  --surface:        var(--paper);
  --surface-card:   #FFFFFF;
  --surface-elev:   var(--paper-soft);
  --nav-bg:         rgba(237,234,227,.72);
  --nav-shadow:     0 1px 0 rgba(0,0,0,.04);

  --fg:             var(--ink);
  --fg-soft:        rgba(0,0,0,.72);
  --fg-muted:       rgba(0,0,0,.55);
  --fg-faint:       rgba(0,0,0,.28);
  --fg-faintest:    rgba(0,0,0,.12);

  --line:           rgba(0,0,0,.10);
  --line-strong:    rgba(0,0,0,.18);
  --line-faint:     rgba(0,0,0,.06);

  --wave-url:       url("assets/patterns/wave_purple.svg");
  --wave-opacity:   .14;
  --wave-blend:     multiply;

  --orb-src:        url("assets/logos/symbol_black.svg");
  --orb-decoration: invert(1);

  --hover-purple-tint: rgba(93,67,145,.10);
  --hover-on-surface:  rgba(0,0,0,.04);

  /* Token aliases the original site.css uses */
  --line-dark:      var(--line);
  --line-darker:    var(--line-faint);
}

/* ---------- Body + base elements ---------- */
html, body { background: var(--surface); color: var(--fg); }
body { transition: background 380ms var(--ease-soft), color 380ms var(--ease-soft); }

/* ---------- Global overrides for the light theme ---------- */
/* Inline rgba(255,255,255,…) literals in the HTML get neutralised here
   so the user can flip themes without us refactoring every span. */
html[data-theme="light"] {
  color-scheme: light;
}

/* Section dividers */
section + section { border-top-color: var(--line); }

/* ---------- Nav (override site.css colors via variables) ---------- */
.nav { background: var(--nav-bg); border-bottom-color: var(--line); }
.nav__links a { color: var(--fg-muted); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--fg); }
.nav__lang { border-color: var(--line); }
.nav__lang button { color: var(--fg-muted); }
.nav__lang button:hover { color: var(--fg); }
.nav__lang button[aria-pressed="true"] { color: var(--fg); background: var(--hover-on-surface); }
.nav__cta { color: var(--fg); border-color: var(--line); }
.nav__cta:hover { background: var(--purple); border-color: var(--purple); color: #fff; }

/* Logo swap for light theme — the SVG mark in the nav uses the dark variant */
html[data-theme="light"] .nav__brand img,
html[data-theme="light"] .footer__base img,
html[data-theme="light"] .hero__orb,
html[data-theme="light"] img[src*="symbol_white.svg"],
html[data-theme="light"] img[src*="english_white.svg"],
html[data-theme="light"] img[src*="arabic_white.svg"] { filter: invert(1); }

/* ---------- Theme toggle button (the sun/moon) ---------- */
.theme-toggle {
  position: relative; width: 36px; height: 28px;
  background: transparent; border: 1px solid var(--line);
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 200ms, background 200ms;
  border-radius: 0;
  color: var(--fg-muted);
}
.theme-toggle:hover { border-color: var(--purple-light); color: var(--fg); }
.theme-toggle svg { width: 16px; height: 16px; display: block; transition: transform 600ms var(--ease-out); }
/* Sun visible in DARK (because clicking makes it light) — Moon visible in LIGHT */
.theme-toggle .ico-sun  { display: block; }
.theme-toggle .ico-moon { display: none; }
html[data-theme="light"] .theme-toggle .ico-sun  { display: none; }
html[data-theme="light"] .theme-toggle .ico-moon { display: block; }
.theme-toggle:hover svg { transform: rotate(36deg); }
html[data-theme="light"] .theme-toggle:hover svg { transform: rotate(-36deg); }

/* ---------- Hero wave ---------- */
.hero__wave {
  background-image: var(--wave-url);
  opacity: var(--wave-opacity);
  mix-blend-mode: var(--wave-blend);
}
.hero h1, html[lang="ar"] .hero h1 { color: var(--fg); }
.hero__counter { color: var(--fg-muted); }
.hero__lead { color: var(--fg-soft); }

/* ---------- Section text / leads / headings ---------- */
section h2, html[lang="ar"] section h2 { color: var(--fg); }
section .lead { color: var(--fg-soft); }
.eyebrow-row .eyebrow:not(.on-paper) { color: var(--purple-light); }
html[data-theme="light"] .eyebrow-row .eyebrow:not(.on-paper),
html[data-theme="light"] .eyebrow { color: var(--purple); }
html[data-theme="light"] .siderail { color: rgba(0,0,0,.55); }

/* ---------- Service cards ---------- */
.svc { background: var(--surface-card); border-color: var(--line); }
.svc__title { color: var(--fg); }
.svc__copy { color: var(--fg-soft); }
.svc__feats { border-top-color: var(--line); }
.svc__feats li { color: var(--fg-muted); }
.svc__price { color: var(--fg); }
html[data-theme="light"] .svc--featured { background: rgba(93,67,145,.08); }
/* The "Enquire →" link inside service cards uses var(--purple-light) inline.
   That fails AA on paper — override to var(--purple) on light. */
html[data-theme="light"] .svc a[style*="purple-light"] { color: var(--purple) !important; }

/* ---------- Process numlist ---------- */
.numlist__row { border-top-color: var(--line); }
.numlist__row:last-child { border-bottom-color: var(--line); }
.numlist__row:hover { background: var(--hover-purple-tint); }
.numlist__num { color: var(--fg-faint); }
.numlist__title { color: var(--fg); }
.numlist__copy { color: var(--fg-muted); }
.numlist__arrow { color: var(--fg-faint); }

/* ---------- Clients strip ---------- */
.clients { border-color: var(--line); }
.client { color: var(--fg-muted); border-right-color: var(--line); }
.client:hover { color: var(--fg); background: var(--hover-purple-tint); }
html[data-theme="light"] .client { color: var(--fg-muted); }

/* ---------- Footer ---------- */
.footer { border-top-color: var(--line); }
.footer__col h4 { color: var(--fg-faint); }
.footer__col a, .footer__col p { color: var(--fg-soft); }
.footer__col a:hover { color: var(--fg); }
.footer__base { border-top-color: var(--line); color: var(--fg-faint); }
.footer__brand-line { color: var(--fg); }
.footer__brand-tag { color: var(--fg-muted); }

/* ---------- Work tiles ---------- */
.work-tile .slot { background: var(--surface-elev); border-color: var(--line); }
.work-tile__title { color: var(--fg); }
.work-tile__caption { color: var(--fg-muted); }
.work-tile__index { color: var(--fg-faint); }

/* ---------- Traits ---------- */
.traits { border-top-color: var(--line); }
.trait { border-right-color: var(--line); }
html[data-theme="light"] .trait:nth-child(2n) { border-right: 0; }
.trait:hover { background: var(--hover-purple-tint); }
.trait__title { color: var(--fg); }
.trait__copy { color: var(--fg-muted); }

/* ---------- Founder + facts ---------- */
.founder__portrait { background: var(--surface-elev); border-color: var(--line); }
.founder__name { color: var(--fg); }
.fact { border-top-color: var(--line); }
.fact__n { color: var(--fg); }
.fact__lbl { color: var(--fg-muted); }

/* ---------- Form fields ---------- */
.field input, .field textarea, .field select {
  color: var(--fg); border-bottom-color: var(--line);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field label { color: var(--fg-muted); }
html[data-theme="light"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}
html[data-theme="light"] .field select option { color: #000; background: #fff; }

/* Contact side rail + booking card */
.contact-side h3 { color: var(--fg-faint); }
.contact-side .channel { border-top-color: var(--line); }
.contact-side .channel:last-child { border-bottom-color: var(--line); }
.contact-side .channel .lbl { color: var(--fg-faint); }
.contact-side .channel .val { color: var(--fg); }
.contact-side .channel a.val:hover { color: var(--purple-light); }
html[data-theme="light"] .contact-side .channel a.val:hover { color: var(--purple); }

.booking { background: var(--surface-card); border-color: var(--line); }
.booking__title { color: var(--fg); }
.booking__sub { color: var(--fg-muted); }
.booking__google { border-top-color: var(--line); color: var(--fg-faint); }
.cal__month { color: var(--fg); }
.cal__btn { border-color: var(--line); color: var(--fg); }
.cal__wd { color: var(--fg-faint); }
.cal__day { color: var(--fg-soft); }
.cal__day:hover:not(.is-disabled):not(.is-out) { border-color: var(--line); color: var(--fg); }
.cal__day.is-out { color: var(--fg-faintest); }
.cal__day.is-disabled { color: var(--fg-faintest); }
.cal__day.is-selected { color: #fff; }
.slots { border-top-color: var(--line); }
.slots__heading { color: var(--fg-muted); }
.slot { border-color: var(--line); color: var(--fg); }
.booking__empty { color: var(--fg-faint); border-top-color: var(--line); }
.booking__confirm { background: rgba(93,67,145,.10); }
.booking__confirm .when { color: var(--fg); }
.booking__confirm .tz { color: var(--fg-muted); }

/* Location card */
.location { background: var(--surface-card); border-color: var(--line); }
.location__map { background: var(--surface-elev); }
html[data-theme="light"] .location__map {
  background-image: radial-gradient(circle at 30% 30%, rgba(93,67,145,.18), transparent 50%),
                    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 64px),
                    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 64px);
}
.location__copy h3 { color: var(--fg); }
.location__copy p { color: var(--fg-soft); }

/* ---------- Force readable inline rgba(255,255,255) literals on light theme ----------
   The HTML files style some texts directly. Override via attribute selectors. */
html[data-theme="light"] [style*="rgba(255,255,255"] {
  /* nothing — those inline rgbas are still applied; for spans, color is unimportant.
     We add specific repairs only where it would harm readability. */
}
html[data-theme="light"] .hero__counter,
html[data-theme="light"] [class*="lead"],
html[data-theme="light"] [class*="caption"],
html[data-theme="light"] [class*="copy"] { color: var(--fg-soft) !important; }
html[data-theme="light"] .footer__col a,
html[data-theme="light"] .footer__col p { color: var(--fg-soft) !important; }
html[data-theme="light"] .footer__col a:hover { color: var(--fg) !important; }
html[data-theme="light"] .footer__brand-tag { color: var(--fg-muted) !important; }
html[data-theme="light"] .footer__base { color: var(--fg-faint) !important; }
html[data-theme="light"] .work-tile__caption { color: var(--fg-muted) !important; }

/* The callout — colour the text on light bg */
html[data-theme="light"] .callout > div { color: var(--fg) !important; }
html[data-theme="light"] .callout div[style*="rgba(255,255,255,.55"] { color: var(--fg-muted) !important; }

/* Buttons — keep purple primary; ghost on light needs dark border + text */
html[data-theme="light"] .btn.ghost {
  color: var(--ink); border-color: var(--paper-line);
}
html[data-theme="light"] .btn.ghost:hover {
  border-color: var(--purple); color: var(--purple);
}

/* CTA block wave (light variant) */
.cta-block::before { background-image: var(--wave-url); opacity: var(--wave-opacity); mix-blend-mode: var(--wave-blend); }

/* Selection */
::selection { background: var(--purple); color: #fff; }

/* CTA block emphasis on light */
html[data-theme="light"] .cta-block::before { opacity: .10; }

/* Sticky nav on light: paper-tinted blur */
html[data-theme="light"] .nav { -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }