/* =========================================================
   Knox Kids — UI Kit (CSS variables)
   Não altera ficheiros do Eduma; carregado como stylesheet à parte.
   Modo escuro: html.dark + html.kk-site-dark (sincronizados pelo JS)
   Valores HSL em tripla sem envoltório — usar hsl(var(--token))
   ========================================================= */

:root {
  /* Font stacks (Google Fonts enfileiradas em functions.php) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Outfit", var(--font-sans);

  /* ☀️ LIGHT — tokens HSL */
  --background: 210 30% 98%;
  --foreground: 220 20% 12%;
  --card: 0 0% 100%;
  --card-foreground: 220 20% 12%;
  --card-hover: 210 20% 96%;
  --primary: 197 88% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 20% 93%;
  --secondary-foreground: 220 15% 30%;
  --muted: 210 20% 94%;
  --muted-foreground: 220 10% 45%;
  --accent: 197 88% 42%;
  --destructive: 0 84% 60%;
  --border: 210 20% 90%;
  --input: 210 20% 90%;
  --ring: 197 88% 42%;

  --gradient-hero: linear-gradient(135deg, #f7f9fb 0%, #eef1f5 50%, #f7f9fb 100%);
  --gradient-card: linear-gradient(145deg, #fff 0%, #f2f5f8 100%);
  --gradient-premium: linear-gradient(135deg, #0da2d0 0%, #0a7da0 100%);
  --gradient-locked: linear-gradient(145deg, #eef1f5 0%, #e4e9ee 100%);

  --shadow-card: 0 8px 32px -8px hsla(220 20% 12% / 0.08);
  --shadow-glow: 0 0 40px -10px hsla(197 88% 42% / 0.2);
  --shadow-hover: 0 16px 48px -12px hsla(220 20% 12% / 0.12);

  --radius: 0.75rem;
  --radius-lg: 0.75rem;
  --radius-md: calc(0.75rem - 2px);
  --radius-sm: calc(0.75rem - 4px);

  /* Layout (kit) */
  --kk-container-max: 1400px;
  --kk-container-padding: 2rem;
  --kk-section-py: 5rem;
  --kk-header-height: 4rem;
}

html.dark,
html.kk-site-dark {
  color-scheme: dark;

  --background: 220 20% 6%;
  --foreground: 0 0% 98%;
  --card: 220 18% 10%;
  --card-foreground: 0 0% 98%;
  --card-hover: 220 18% 14%;
  --primary: 197 88% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 15% 18%;
  --secondary-foreground: 0 0% 90%;
  --muted: 220 15% 15%;
  --muted-foreground: 220 10% 55%;
  --accent: 197 88% 46%;
  --destructive: 0 84% 60%;
  --border: 220 15% 18%;
  --input: 220 15% 18%;
  --ring: 197 88% 46%;

  --gradient-hero: linear-gradient(135deg, #121721 0%, #181e2b 50%, #0d1017 100%);
  --gradient-card: linear-gradient(145deg, #1a2030 0%, #121721 100%);
  --gradient-premium: linear-gradient(135deg, #0eaadb 0%, #0b85ab 100%);
  --gradient-locked: linear-gradient(145deg, #161c26 0%, #0d1017 100%);

  --shadow-card: 0 8px 32px -8px hsla(0 0% 0% / 0.5);
  --shadow-glow: 0 0 40px -10px hsla(197 88% 46% / 0.3);
  --shadow-hover: 0 16px 48px -12px hsla(0 0% 0% / 0.6);
}

/* Legado Knox (LearnDash / overrides) — derivam dos tokens semânticos */
html {
  --kk-bg: hsl(var(--background));
  --kk-fg: hsl(var(--foreground));
  --kk-muted: hsl(var(--muted-foreground));
  --kk-card: hsl(var(--card));
  --kk-card-2: hsl(var(--card-hover));
  --kk-border: hsl(var(--border));
  --kk-primary: hsl(var(--primary));
  --kk-primary-10: hsl(var(--primary) / 0.1);
  --kk-primary-20: hsl(var(--primary) / 0.2);
  --kk-radius: var(--radius);
}

/* Tipografia base do kit (sobre o tema) */
body {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading__primary {
  font-family: var(--font-heading);
}

/* ----- Componentes utilitários (kit) ----- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: var(--radius);
  border: 0;
  background: var(--gradient-premium);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
  transition: all 300ms ease;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: var(--shadow-hover);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: 0.5rem;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 0;
  transition: all 300ms ease;
  text-decoration: none;
  cursor: pointer;
}

.card-premium {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
  transition: all 500ms ease;
}

.card-premium:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-hover);
}

.card-locked {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--gradient-locked);
  box-shadow: var(--shadow-card);
  opacity: 0.7;
  transition: opacity 300ms ease;
}

.card-locked:hover {
  opacity: 0.85;
}

.glass-effect {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: hsl(var(--background) / 0.8);
}

.text-gradient {
  background: var(--gradient-premium);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}