/**
 * Rovvi.com design tokens.
 *
 * Built on the audited token system from phase-b-templates/www-Template
 * (surface/text/state tokens verified for WCAG ≥ 4.5:1 text / ≥ 3:1 UI in both
 * light and dark). The accent family is re-skinned to the Rovvi indigo→violet
 * brand, and a small set of brand + marketing utilities is appended.
 *
 * Usage: reference via `var(--token-name)`. Never use raw hex/Tailwind color
 * classes in markup — it breaks the theme system. Fuchsia/violet brand colors
 * are for gradients and large display text only (≥3:1 large-text rule), never
 * body copy.
 */

:root {
  /* Surfaces */
  --bg-page:      #ffffff;
  --bg-surface:   #f8fafc;
  --bg-elevated:  #ffffff;
  --bg-inset:     #f1f5f9;

  /* Text — contrasts vs. --bg-page */
  --text-primary:   #0f172a; /* 16.09:1 */
  --text-secondary: #475569; /* 7.55:1  */
  --text-muted:     #64748b; /* 5.74:1  */
  --text-inverse:   #ffffff;

  /* Borders */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  /* Accent (Rovvi brand — teal) */
  --accent:       #0f766e; /* teal-700 — 5.36:1 vs. --bg-page */
  --accent-hover: #115e59; /* teal-800 — 6.90:1 */
  --accent-text:  #ffffff; /* 5.36:1 vs. --accent */

  /* Vivid brand stops — for the logo mark + decorative UI graphics (≥3:1). */
  --brand-teal:    #0d9488; /* teal-600  */
  --brand-emerald: #10b981; /* emerald-500 */
  --brand-cyan:    #22d3ee; /* cyan-400  */

  /* Background gradient — white text sits on this, so it stays dark enough
     for ≥4.5:1 white-on-gradient in BOTH themes (kept identical in dark). */
  --brand-gradient: linear-gradient(135deg, #0f766e 0%, #047857 50%, #155e75 100%);
  /* Text-clip gradient — used by .gradient-text on large display headings. */
  --brand-gradient-text: linear-gradient(135deg, #0d9488 0%, #059669 50%, #0891b2 100%);
  /* Soft tint — section / hero backgrounds (dark text on top). */
  --brand-gradient-soft: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 50%, #ecfeff 100%);

  /* Semantic states */
  --success:      #047857; /* 5.86:1 */
  --success-text: #ffffff;
  --danger:       #b91c1c; /* 7.32:1 */
  --danger-text:  #ffffff;
  --warning:      #b45309; /* 5.16:1 */
  --warning-text: #ffffff;
  --info:         #0369a1; /* 6.20:1 */
  --info-text:    #ffffff;

  /* Focus ring */
  --focus-ring:   #0f766e;

  /* Spacing tokens (rem-based for zoom-safety) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Typography */
  --font-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.12), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* Layout */
  --container-max: 72rem;
}

:root.dark {
  --bg-page:      #0f172a;
  --bg-surface:   #1e293b;
  --bg-elevated:  #334155;
  --bg-inset:     #0b1221;

  --text-primary:   #f1f5f9; /* 15.02:1 */
  --text-secondary: #cbd5e1; /* 10.29:1 */
  --text-muted:     #94a3b8; /*  6.65:1 */
  --text-inverse:   #0f172a;

  --border:        #334155;
  --border-strong: #475569;

  --accent:       #2dd4bf; /* teal-400 — 9.0:1 vs. --bg-page */
  --accent-hover: #5eead4; /* teal-300 — 11.8:1 */
  --accent-text:  #022c22;

  /* Vivid stops stay fixed across themes (logo mark / graphics). */
  --brand-teal:    #0d9488;
  --brand-emerald: #10b981;
  --brand-cyan:    #22d3ee;
  /* Background gradient kept dark so white text on CTA bands stays ≥4.5:1. */
  --brand-gradient: linear-gradient(135deg, #0f766e 0%, #047857 50%, #155e75 100%);
  /* Text-clip gradient goes light here so it reads on the dark page bg. */
  --brand-gradient-text: linear-gradient(135deg, #2dd4bf 0%, #34d399 50%, #22d3ee 100%);
  /* Soft tint — dark teal/emerald/cyan section + hero backgrounds. */
  --brand-gradient-soft: linear-gradient(135deg, #042f2e 0%, #022c22 50%, #083344 100%);

  --success:      #34d399; /* 8.30:1 */
  --success-text: #022c22;
  --danger:       #f87171; /* 6.62:1 */
  --danger-text:  #0f172a;
  --warning:      #fbbf24; /* 11.42:1 */
  --warning-text: #0f172a;
  --info:         #38bdf8; /* 7.79:1 */
  --info-text:    #0f172a;

  --focus-ring:   #2dd4bf;
}

/* Respect prefers-reduced-motion — disable nonessential animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global resets + a11y baseline */
*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-body); scroll-behavior: smooth; background: var(--bg-page); }

body {
  margin: 0;
  background: transparent;
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Living, scroll-reactive backdrop ──────────────────────────────────────
   ONE single, smooth, full-page CONIC gradient behind the WHOLE site — no
   blotches, no tiling, no seams (first stop == last stop, so 0°↔360° wraps).
   Transparent sections (.section / .section--tight set no background) reveal it
   as one continuous wash; opaque cards (--bg-elevated) sit on top, text crisp.

   A conic gradient radiates colour from the centre at every angle, so rotating
   it visibly sweeps the colour around — unlike a linear gradient, whose flat
   middle is all you'd see once scaled up. It ALWAYS spins slowly (--bgspin,
   animated 0→360 via @property) and the scroll ADDS to that (--scroll = degrees,
   set by BaseLayout = scrollY × factor) — so it's alive at rest and clearly
   speeds up / reverses as you scroll. scale(2.2) keeps the rotated layer
   covering the viewport (incl. wide aspect ratios) with zero corner gaps. */
@property --bgspin { syntax: '<number>'; inherits: false; initial-value: 0; }

/* STATIC full-page tint. A continuously-rotating conic gradient (the previous
   version) repainted every frame at scale(2.2) over the whole viewport, which
   made the entire site — and every theme switch — janky. A static gradient is
   visually similar at rest and essentially free to render. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 210deg at 50% 50%,
    color-mix(in srgb, var(--brand-teal) 20%, var(--bg-page)),
    color-mix(in srgb, var(--brand-cyan) 16%, var(--bg-page)),
    color-mix(in srgb, var(--brand-emerald) 19%, var(--bg-page)),
    color-mix(in srgb, var(--brand-teal) 14%, var(--bg-page)),
    color-mix(in srgb, var(--brand-cyan) 18%, var(--bg-page)),
    color-mix(in srgb, var(--brand-teal) 20%, var(--bg-page)));
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.01em; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link — hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-page);
  color: var(--text-primary);
  border: 2px solid var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────── Marketing utilities ─────────────────────────── */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }

/* Gradient display text (large headings only — not body copy) */
.gradient-text {
  background: var(--brand-gradient-text);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rv-text-shimmer 7s linear infinite;
}
@keyframes rv-text-shimmer { to { background-position: 220% center; } }

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}

/* Buttons */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, filter 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Tactile press — a quick, noticeable squash on click. */
.btn:active { transform: translateY(1px) scale(0.97); filter: brightness(0.96); transition-duration: 0.04s; }
/* Diagonal light sweep on hover (sits above the bg, below the label). */
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 65%; height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn:hover::before { left: 150%; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-text); box-shadow: var(--shadow-lg); }

.btn-gradient {
  background: var(--brand-gradient);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}
.btn-gradient:hover { color: #ffffff; box-shadow: var(--shadow-xl); }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--border-strong);
}
.btn-outline:hover { color: var(--accent-hover); border-color: var(--accent); background: var(--bg-inset); }

.btn-lg { padding: var(--space-4) var(--space-8); font-size: 1.0625rem; }

/* Card */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

/* Pill / chip */
.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* ───────────────────────── Depth & dimension ─────────────────────────────── */

:root {
  --shadow-glow: 0 18px 50px -12px color-mix(in srgb, var(--brand-teal) 45%, transparent);
}

/* Glassmorphism panel */
.glass {
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

/* Aurora background: soft drifting brand glows behind a section.
   Apply to a position:relative container; the glows sit behind content. */
.aurora { position: relative; isolation: isolate; overflow: hidden; }
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
}
.aurora::before {
  background: radial-gradient(circle, var(--brand-teal) 0%, transparent 60%);
  top: -16rem; left: -10rem;
  animation: aurora-drift-a 22s ease-in-out infinite alternate;
}
.aurora::after {
  /* was var(--brand-fuchsia) — undefined token rendered this glow invisible. */
  background: radial-gradient(circle, var(--brand-cyan) 0%, transparent 60%);
  bottom: -18rem; right: -12rem;
  opacity: 0.4;
  animation: aurora-drift-b 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift-a { to { transform: translate3d(6rem, 4rem, 0) scale(1.15); } }
@keyframes aurora-drift-b { to { transform: translate3d(-5rem, -3rem, 0) scale(1.1); } }

/* Elevated, glowing surface on hover */
.lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl), var(--shadow-glow); }

/* 3D cursor tilt — wired by the global script via [data-tilt]. */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.18s ease;
  will-change: transform;
}

/* Scroll-reveal — hidden until .in is added by the observer.
   Gated behind html.js so that if JS never runs, content stays visible
   (no blank page). The .js class is set pre-paint in BaseLayout. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: 0.08s; }
.reveal-3 { transition-delay: 0.16s; }
.reveal-4 { transition-delay: 0.24s; }

/* Gradient hairline divider */
.divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); margin: 0; }

/* ── Glossy 3D "bubble" ────────────────────────────────────────────────────
   A lit orb: top-left light source (radial highlight), a grounding drop shadow
   so it floats off the surface, and inset highlight/shade for volume. Plus a
   specular glint (::after). Drop it on circular OR rounded-square badges — the
   element sets its own border-radius; the bubble brings the depth + color.
   Default skin = brand teal; add a modifier class to recolor. */
.bubble-3d {
  position: relative;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 22%,
      color-mix(in srgb, var(--brand-teal) 30%, #ffffff) 0%,
      var(--brand-teal) 46%,
      color-mix(in srgb, var(--brand-teal) 62%, #000000) 100%);
  box-shadow:
    0 12px 24px -8px color-mix(in srgb, var(--brand-teal) 60%, transparent),
    0 3px 6px -2px rgb(0 0 0 / 0.22),
    inset 0 2px 2px rgb(255 255 255 / 0.55),
    inset 0 -6px 11px color-mix(in srgb, var(--brand-teal) 55%, #000);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bubble-3d::after {  /* specular glint */
  content: "";
  position: absolute;
  top: 9%; left: 15%;
  width: 44%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 70%);
  pointer-events: none;
}
/* Colour variants (cycle these for visual rhythm in a grid). */
.bubble-3d--cyan {
  background: radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--brand-cyan) 35%, #fff) 0%, var(--brand-cyan) 46%, color-mix(in srgb, var(--brand-cyan) 60%, #000) 100%);
  box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--brand-cyan) 55%, transparent), 0 3px 6px -2px rgb(0 0 0 / 0.22), inset 0 2px 2px rgb(255 255 255 / 0.6), inset 0 -6px 11px color-mix(in srgb, var(--brand-cyan) 50%, #000);
  color: #06262b;
}
.bubble-3d--emerald {
  background: radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--brand-emerald) 32%, #fff) 0%, var(--brand-emerald) 46%, color-mix(in srgb, var(--brand-emerald) 60%, #000) 100%);
  box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--brand-emerald) 55%, transparent), 0 3px 6px -2px rgb(0 0 0 / 0.22), inset 0 2px 2px rgb(255 255 255 / 0.55), inset 0 -6px 11px color-mix(in srgb, var(--brand-emerald) 52%, #000);
}
/* Lift the bubble a touch when its card is hovered. */
.lift:hover .bubble-3d,
.service-card:hover .bubble-3d,
[data-tilt]:hover .bubble-3d { transform: translateY(-2px) scale(1.04); }

/* ── Click ripple ──────────────────────────────────────────────────────────
   Injected by BaseLayout on pointer-down for buttons / clickable cards.
   The host gets position:relative + overflow:hidden inline (only applied to
   elements with no overhanging children, so badges never get clipped). */
.rv-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  animation: rv-ripple-go 0.6s ease-out forwards;
}
@keyframes rv-ripple-go { to { transform: scale(2.6); opacity: 0; } }

/* ── Header elevation on scroll ────────────────────────────────────────────
   BaseLayout adds .is-scrolled once the page leaves the top. */
.site-header { transition: box-shadow 0.25s ease, background 0.25s ease; }
.site-header.is-scrolled {
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.28);
  background: color-mix(in srgb, var(--bg-page) 94%, transparent);
}

/* Generic clickable press — for cards/tiles that opt in via [data-press]. */
[data-press] { transition: transform 0.14s ease, box-shadow 0.14s ease; }
[data-press]:active { transform: scale(0.985); }

/* Motion safety: neutralize reveal/tilt/aurora/bubble/shimmer for reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-tilt] { transform: none !important; }
  .aurora::before, .aurora::after { animation: none !important; }
  body::before { transform: scale(2.2) !important; transition: none !important; animation: none !important; }
  .gradient-text { animation: none !important; }
  .rv-ripple { display: none !important; }
  .btn::before { display: none !important; }
}