/* Urban Cool Tech — design tokens & utility extensions
   Ported from src/styles.css of the React app. */

:root {
  --radius: 0.875rem;

  --background: oklch(0.99 0.005 230);
  --foreground: oklch(0.18 0.04 250);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.04 250);

  --primary: oklch(0.45 0.18 245);
  --primary-foreground: oklch(0.99 0 0);
  --primary-glow: oklch(0.72 0.16 220);

  --secondary: oklch(0.96 0.02 230);
  --secondary-foreground: oklch(0.22 0.06 250);

  --muted: oklch(0.965 0.01 230);
  --muted-foreground: oklch(0.5 0.03 250);

  --accent: oklch(0.85 0.13 200);
  --accent-foreground: oklch(0.18 0.06 250);

  --cta: oklch(0.72 0.19 50);
  --cta-foreground: oklch(0.99 0 0);

  --whatsapp: oklch(0.68 0.18 145);

  --border: oklch(0.92 0.015 230);
  --input: oklch(0.92 0.015 230);
  --ring: oklch(0.55 0.16 240);

  --gradient-hero: linear-gradient(135deg, oklch(0.32 0.14 250) 0%, oklch(0.45 0.18 230) 50%, oklch(0.62 0.16 200) 100%);
  --gradient-cta:  linear-gradient(135deg, oklch(0.74 0.2 55) 0%, oklch(0.66 0.22 30) 100%);
  --gradient-cool: linear-gradient(180deg, oklch(0.97 0.02 220) 0%, oklch(0.99 0.005 230) 100%);

  --shadow-glow: 0 20px 60px -20px oklch(0.45 0.18 245 / 0.45);
  --shadow-cta:  0 12px 32px -8px oklch(0.72 0.19 50 / 0.55);
  --shadow-card: 0 8px 28px -12px oklch(0.18 0.04 250 / 0.15);
}

html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4 { font-family: 'Sora', system-ui, sans-serif; letter-spacing: -0.02em; }
* { border-color: var(--border); }

/* Custom utility classes used by templates (mirroring src/styles.css) */
.bg-gradient-hero { background-image: var(--gradient-hero); }
.bg-gradient-cta  { background-image: var(--gradient-cta); }
.bg-gradient-cool { background-image: var(--gradient-cool); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-cta  { box-shadow: var(--shadow-cta); }
.shadow-card { box-shadow: var(--shadow-card); }
.text-balance { text-wrap: balance; }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0    oklch(0.68 0.18 145 / 0.6); }
  70%  { box-shadow: 0 0 0 14px oklch(0.68 0.18 145 / 0);   }
  100% { box-shadow: 0 0 0 0    oklch(0.68 0.18 145 / 0);   }
}
.animate-pulse-ring { animation: pulse-ring 1.8s infinite; }

/* Make sure WP admin bar doesn't sit under the sticky bottom bar */
body.admin-bar .uct-sticky-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* FAQ open/close cosmetics handled by JS toggling [data-open] */
.uct-faq[data-open="true"] .uct-faq-body { display: block; }
.uct-faq[data-open="false"] .uct-faq-body { display: none; }
.uct-faq[data-open="true"]  { border-color: var(--primary); box-shadow: var(--shadow-card); }