/* =========================================================================
   theme.css - light ("white") theme + theme-toggle control.

   Dark is the site's default and is UNTOUCHED. Everything here is additive:
   the toggle button styling (works in both themes) plus a single
   [data-theme="light"] layer that re-maps the design tokens and patches the
   handful of places that hardcode dark surfaces. The brand gold accent is
   preserved (deepened slightly for contrast on white). Loaded LAST so any
   equal-specificity ties resolve in the light theme's favour.
   ========================================================================= */

/* --- Theme toggle button (both themes) ---------------------------------- */
.theme-toggle {
  position: relative;
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text-strong); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.theme-toggle:hover {
  background: var(--gold-soft); border-color: rgba(195, 163, 104, 0.45);
  color: var(--gold-bright); transform: translateY(-1px);
}
.theme-toggle .rv-icon { width: 1.7rem; height: 1.7rem; }

/* sun shows in dark theme (click -> go light); moon shows in light theme */
.theme-toggle .ico-moon { display: none; }
.theme-toggle .ico-sun  { display: block; }
[data-theme="light"] .theme-toggle .ico-sun  { display: none; }
[data-theme="light"] .theme-toggle .ico-moon { display: block; }

.theme-toggle-label { display: none; }

/* block variant inside the mobile menu */
.theme-toggle--block {
  width: 100%; height: auto; gap: 0.6rem;
  padding: 0.95rem 1rem; border-radius: var(--r-sm);
  font-weight: 600; font-size: 1rem;
}
.theme-toggle--block .theme-toggle-label { display: inline; }

/* =========================================================================
   LIGHT THEME
   ========================================================================= */
[data-theme="light"] {
  color-scheme: light;

  /* surfaces - cards are crisp WHITE (raised above the off-white field) so
     they don't read as recessed grey tints the way the dark-theme rgba did */
  --bg:            #f6f7fa;
  --bg-alt:        #eef1f7;
  --surface:       #ffffff;
  --card:          #ffffff;
  --card-2:        #ffffff;
  --border:        rgba(23, 33, 58, 0.13);
  --border-strong: rgba(23, 33, 58, 0.22);

  /* brand gold - RICH & saturated so it reads as intentional premium gold on
     white (the dark-theme gold looked washed/pale here). --gold drives icons,
     base links and dots; --gold-bright is the brighter hover/accent tone. */
  --gold:          #a87d2b;
  --gold-bright:   #c99b39;
  --gold-soft:     rgba(168, 125, 43, 0.13);

  /* text */
  --text:          #3d4760;
  --text-strong:   #131a2c;
  --text-muted:    #687389;

  /* effects */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 44px -28px rgba(23,33,58,0.35);
}

/* page + global ambient field ------------------------------------------- */
[data-theme="light"] html { background: var(--bg); }
[data-theme="light"] #site-bg {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 38%, #eef1f8 70%, #f4f6fb 100%);
}
/* the drifting glow blooms - softened so they read as light tints, not mud */
[data-theme="light"] .site-bg-bloom { opacity: 0.4; filter: blur(80px); }
[data-theme="light"] .site-bg-bloom--1 { background: radial-gradient(circle, rgba(43,58,102,0.16), transparent 66%); }
[data-theme="light"] .site-bg-bloom--2 { background: radial-gradient(circle, rgba(195,163,104,0.22), transparent 66%); }
[data-theme="light"] .site-bg-bloom--3 { background: radial-gradient(circle, rgba(43,58,102,0.12), transparent 66%); }
/* (the global starfield is recoloured to navy for light mode in main.js, so
   it stays visible on white instead of being hidden) */
[data-theme="light"] .site-bg-vignette {
  background:
    radial-gradient(130% 100% at 50% 0%,   transparent 62%, rgba(23,33,58,0.05) 100%),
    radial-gradient(120% 120% at 50% 100%, transparent 66%, rgba(23,33,58,0.05) 100%);
}
/* cursor light: gentle navy-tinted gold so it reads on a bright field */
[data-theme="light"] .cursor-glow {
  background: radial-gradient(circle,
      rgba(156,122,52,0.14) 0%, rgba(156,122,52,0.06) 34%, transparent 68%);
}

/* header / nav ----------------------------------------------------------- */
[data-theme="light"] .site-header { background: rgba(255,255,255,0.65); }
[data-theme="light"] .site-header.is-scrolled { background: rgba(255,255,255,0.9); border-bottom-color: var(--border); }
[data-theme="light"] .nav-links a:hover { background: rgba(23,33,58,0.06); }
[data-theme="light"] .nav-toggle { background: rgba(23,33,58,0.05); }
[data-theme="light"] .site-header.nav-open,
[data-theme="light"] .mobile-nav { background: rgba(255,255,255,0.98); }

/* surface sections - a soft white wash raised above the off-white field --- */
[data-theme="light"] .section--surface::before {
  background: linear-gradient(180deg,
    transparent 0%, rgba(255,255,255,0.72) 16%, rgba(255,255,255,0.72) 84%, transparent 100%);
}

/* premium surfaces + gold accents --------------------------------------- */
/* crisp white cards get a soft resting shadow so they read as genuinely
   raised (not flat tints) - a clear, premium card on the off-white field. */
[data-theme="light"] .card,
[data-theme="light"] .cap-item,
[data-theme="light"] .contact-item,
[data-theme="light"] .acc-item,
[data-theme="light"] .side-card,
[data-theme="light"] .gallery-item {
  box-shadow: 0 1px 2px rgba(23,33,58,0.05), 0 14px 34px -26px rgba(23,33,58,0.30);
}
/* light-themed hover lift (replaces the dark theme's heavy black glow) - a
   crisp shadow + soft gold halo. Higher specificity than the resting rule. */
[data-theme="light"] .card:hover,
[data-theme="light"] .cap-item:hover,
[data-theme="light"] .contact-item:hover,
[data-theme="light"] .gallery-item:hover {
  box-shadow: 0 18px 44px -24px rgba(23,33,58,0.40), 0 0 26px -10px rgba(168,125,43,0.32);
}
/* gold icon chips: a BRIGHT metallic gold plate with a crisp gold border, an
   inner glossy sheen, and a soft gold drop-glow so the plates read as polished
   gold. On card-hover the chip lifts/blooms and the site's signature "comet"
   ring (reused from .btn) traces the border in gold. */
[data-theme="light"] .card-icon {
  position: relative; isolation: isolate;
  background: linear-gradient(158deg, #fbe7c0 0%, #eccd86 46%, #d9b568 100%);
  border: 1.5px solid rgba(124, 90, 28, 0.5);
  color: #7c5a1c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 6px 16px -8px rgba(168,125,43,0.5);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
[data-theme="light"] .card-icon .rv-icon { position: relative; z-index: 1; }
/* the comet ring - a conic gradient masked to the border, hidden at rest */
[data-theme="light"] .card-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--rv-angle),
    rgba(168,125,43,0) 0deg, rgba(168,125,43,0) 232deg,
    #e8c878 288deg, #fff3cf 312deg, #e8c878 336deg, rgba(168,125,43,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(232,200,120,0.7));
  opacity: 0; transition: opacity 0.35s var(--ease);
}
/* lift + bloom + spin the comet when the parent card/contact-item is hovered */
[data-theme="light"] .card:hover .card-icon,
[data-theme="light"] .contact-item:hover .card-icon {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(124, 90, 28, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 10px 24px -8px rgba(168,125,43,0.7),
    0 0 24px -6px rgba(232,200,120,0.75);
}
[data-theme="light"] .card:hover .card-icon::before,
[data-theme="light"] .contact-item:hover .card-icon::before {
  opacity: 1; animation: rv-border-spin 3.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  /* keep a static bright gold arc on hover, but no spin / scale */
  [data-theme="light"] .card-icon::before { animation: none; --rv-angle: 305deg; }
  [data-theme="light"] .card:hover .card-icon,
  [data-theme="light"] .contact-item:hover .card-icon { transform: none; }
}
/* gold-tinted, clearly-defined rings on the FAQ + cap icons */
[data-theme="light"] .acc-trigger .acc-icon { border-color: rgba(168,125,43,0.42); }
/* the thin top accent line on premium cards reads as vivid gold */
[data-theme="light"] .badge {
  background: var(--gold-soft); border-color: rgba(168,125,43,0.4); color: var(--gold);
}

/* ---- Metallic gold TEXT, site-wide -------------------------------------
   Flat gold reads washed on white, so every prominent gold text accent gets
   the same polished gold gradient clipped to its glyphs. Two tiers:
   (1) bright display numerals (stats, "at a glance" suffix, process-step
       counters, legal section numbers) - brighter gradient + a soft lift;
   (2) accent labels (eyebrows, .text-gold, the "Vinz" wordmark) - a slightly
       deeper gradient tuned to stay legible at small sizes.
   Gold ICONS (SVG strokes) and hover LINKS are intentionally left as solid
   rich gold: a gradient can't paint an SVG, and clipped text can't animate its
   colour on :hover. */
[data-theme="light"] .stat-num span,
[data-theme="light"] .stat .stat-count,
[data-theme="light"] .gstat-num .suf,
[data-theme="light"] .step::before,
[data-theme="light"] .legal-content h2 .num {
  color: #9a6f22; /* fallback if background-clip:text is unsupported */
  background: linear-gradient(165deg, #e7c578 0%, #b3852f 52%, #7e5915 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .stat-num span,
[data-theme="light"] .stat .stat-count,
[data-theme="light"] .step::before {
  text-shadow: 0 2px 10px rgba(168,125,43,0.22);
}
[data-theme="light"] .eyebrow,
[data-theme="light"] .text-gold,
[data-theme="light"] .wordmark b {
  color: #8a6320; /* fallback */
  background: linear-gradient(160deg, #c4953b 0%, #a87d2b 50%, #7c5816 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .stat .stat-label {
  color: #4f5870; font-weight: 500;
}

/* buttons ---------------------------------------------------------------- */
/* default comet ring is white (invisible on light) -> use a navy comet */
[data-theme="light"] .btn {
  --ring-base: rgba(23,33,58,0.18);
  --ring-hot:  rgba(43,58,102,0.85);
  --ring-core: #2b3a66;
  --ring-glow: rgba(43,58,102,0.45);
}
/* primary gold pill: shiny metallic gold with a top sheen highlight + warm
   glow so it reads as polished gold against the white field. */
[data-theme="light"] .btn-primary {
  --ring-base: rgba(120,86,20,0.5);
  --ring-hot:  #fff7e2;
  --ring-core: #ffffff;
  --ring-glow: rgba(255,243,206,0.95);
  background: linear-gradient(165deg, #f9e8b6 0%, #eccd83 32%, #cca351 64%, #e4c885 100%);
  color: #1a1407;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 10px 30px -10px rgba(196,154,69,0.7),
    0 0 22px -6px rgba(241,217,154,0.6);
}
[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(165deg, #fdf1cb 0%, #f2d693 32%, #d6ad5b 64%, #efd49a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 16px 40px -10px rgba(196,154,69,0.85),
    0 0 28px -4px rgba(241,217,154,0.75);
}
[data-theme="light"] .btn-ghost {
  /* navy static outline keeps the border visible; the travelling comet is a
     soft shiny gold (not navy) so it doesn't read as a dark blob on white. */
  --ring-base: rgba(43,58,102,0.26);
  --ring-hot:  rgba(196,154,69,0.85);
  --ring-core: #f1d99a;
  --ring-glow: rgba(241,217,154,0.45);
  background: rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 26px -16px rgba(23,33,58,0.3);
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(255,255,255,0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1),
              0 12px 30px -16px rgba(23,33,58,0.35),
              0 0 22px -8px rgba(196,154,69,0.32);
}

/* hero ------------------------------------------------------------------- */
/* The dark hero leans on a big GOLD bloom that reads as a muddy tan cloud on
   white. Light theme instead uses the brand NAVY/BLUE as the ambient glow and
   reserves gold for the accents (badge, primary button) so they pop. */
[data-theme="light"] .hero .lead { color: var(--text); }
[data-theme="light"] .hero-bg--full {
  background:
    radial-gradient(46% 30% at 50% 30%, rgba(43,58,102,0.12) 0%, rgba(43,58,102,0) 100%),
    var(--bg);
}
/* recolour the masked "lights" bloom from gold -> soft navy, and calm it */
[data-theme="light"] .hero-anim-lights {
  background: radial-gradient(40% 52% at 50% 44%,
      rgba(43,58,102,0.55) 0%,
      rgba(56,73,125,0.30) 42%,
      rgba(43,58,102,0) 100%);
  opacity: 0.4;
}
/* The floor-grid PNG is near-white lines (designed for a dark bg) so it's
   invisible on white. Use the PNG as a MASK and fill it with brand navy, so
   the perspective grid renders as crisp navy lines. */
[data-theme="light"] .hero-anim-bottom-background {
  opacity: 1; mix-blend-mode: normal;
  background-color: rgba(43, 58, 102, 0.5);
  -webkit-mask: url(../hero/hero-background-bottom.png) no-repeat center / 100% 100%;
          mask: url(../hero/hero-background-bottom.png) no-repeat center / 100% 100%;
}
[data-theme="light"] .hero-anim-bottom-background img { visibility: hidden; }
/* travelling light lines: tint the gold gradients toward navy */
[data-theme="light"] .hero-anim-bottom-line-animation div {
  background: linear-gradient(180deg, rgba(43,58,102,0) 0%, rgba(43,58,102,.32) 100%);
}
/* ceiling grid: its static PNG is near-transparent, so fill the mask-clipped
   animation layer with a faint navy for a persistent grid; the moving div
   (above) sweeps a brighter navy glint through it. */
[data-theme="light"] .hero-anim-top-animation { background-color: rgba(43,58,102,0.4); }
[data-theme="light"] .hero-anim-top-animation div {
  background: linear-gradient(180deg, rgba(43,58,102,0) 0%, rgba(56,73,125,.7) 100%);
}
/* drop the dark edge smudge from the hero vignette on light */
[data-theme="light"] .hero-bg-vignette {
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 100%);
}

/* feature media panel ---------------------------------------------------- */
[data-theme="light"] .feature-media {
  background: linear-gradient(160deg, #ffffff, #eef1f7);
}
/* the photo's ::after carries a dark bottom gradient + faint white inner ring
   (both tuned for the dark theme); on the white card that reads as a muddy
   dark fade. Drop the dark wash and use a crisp navy hairline border instead. */
[data-theme="light"] .feature-photo::after {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(23,33,58,0.10);
}
/* same treatment for the hero figure frame, where it's used */
[data-theme="light"] .hero-figure {
  background: #ffffff; border-color: var(--border);
}
[data-theme="light"] .hero-figure::after {
  background: none; box-shadow: inset 0 0 0 1px rgba(23,33,58,0.10);
}

/* premium gradient cards (about glance + contact form) ------------------- */
[data-theme="light"] .glance-card,
[data-theme="light"] .form-card {
  background:
    linear-gradient(168deg, rgba(43,58,102,0.06), rgba(255,255,255,0.92)),
    var(--surface);
  box-shadow: 0 30px 62px -40px rgba(23,33,58,0.4), inset 0 1px 0 rgba(255,255,255,0.85);
}

/* form fields ------------------------------------------------------------ */
[data-theme="light"] .cta-form input,
[data-theme="light"] .form-field input,
[data-theme="light"] .form-field textarea,
[data-theme="light"] .form-field select { background: #ffffff; }
[data-theme="light"] .form-card .form-field input:focus-visible,
[data-theme="light"] .form-card .form-field textarea:focus-visible,
[data-theme="light"] .form-card .form-field select:focus-visible { background: #ffffff; }

/* CTA band --------------------------------------------------------------- */
[data-theme="light"] .cta-inner {
  background: linear-gradient(160deg, rgba(43,58,102,0.10), rgba(255,255,255,0.85));
}

/* footer ----------------------------------------------------------------- */
[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, transparent 0%, rgba(238,241,247,0.9) 22%, rgba(232,236,243,1) 100%);
}

/* cookie consent banner ------------------------------------------------- */
/* base banner hardcodes a dark navy glass gradient over --surface, so it
   stays dark on light. Re-skin as a crisp white glass card: soft navy/gold
   tints over white, a light resting shadow, and a subtle navy inner ring. */
[data-theme="light"] .cookie-consent {
  border-color: var(--border);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(195,163,104,0.14), transparent 46%),
    linear-gradient(168deg, rgba(43,58,102,0.05), rgba(255,255,255,0.96)),
    var(--surface);
  box-shadow:
    0 40px 90px -40px rgba(23,33,58,0.4),
    0 0 40px -22px rgba(195,163,104,0.35),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
[data-theme="light"] .cookie-consent::before {
  background: linear-gradient(90deg, transparent, rgba(168,125,43,0.7), transparent);
  background-size: 220% 100%;
}

/* electric heading glow: the dark theme's white-hot flash is invisible on a
   white field, so retint both glow tones to rich/bright gold for light mode. */
[data-theme="light"] .electric { --elec: 168,125,43; --elec-hot: 201,155,57; }
/* Light-theme flicker: dark text on white can't "cut out" to near-zero the way
   bright text on navy does - deep dips just blank the heading against the white
   and read as jarring. So use a gentler flicker (shallower off-dips) and a
   stronger, warmer gold halo so the glow still registers on the bright field. */
[data-theme="light"] .electric.is-lit { animation-name: rv-neon-text-light; }
@keyframes rv-neon-text-light {
  0%   { opacity: 0;    text-shadow: none; }
  14%  { opacity: 0.55; text-shadow: 0 0 8px rgba(var(--elec),0.55); }
  20%  { opacity: 0.3;  text-shadow: none; }
  34%  { opacity: 0.9;  text-shadow: 0 0 14px rgba(var(--elec),0.7), 0 0 26px rgba(var(--elec),0.4); }
  42%  { opacity: 0.45; text-shadow: none; }
  54%  { opacity: 1;    text-shadow: 0 0 18px rgba(var(--elec-hot),0.8), 0 0 34px rgba(var(--elec),0.5); }
  62%  { opacity: 0.78; text-shadow: none; }
  76%  { opacity: 1;    text-shadow: 0 0 12px rgba(var(--elec),0.55); }
  100% { opacity: 1;    text-shadow: none; }
}

/* carousel arrows hover keeps gold; base inherits vars - nothing to patch */