/* tokens.css — Tokens de design da Palatine Academy
   Espelha Website/web/src/styles/global.css para manter as duas plataformas (Astro e WordPress)
   visualmente consistentes. Qualquer ajuste de cor/tipografia/espaçamento deve ser feito nos
   dois arquivos. */

:root {
  /* Cores Principais */
  --color-purple: oklch(35% 0.15 302);
  --color-purple-light: oklch(42% 0.16 302);
  --color-gold: oklch(76% 0.14 80);
  --color-gold-hover: oklch(81% 0.16 82);
  --color-gold-light: oklch(93% 0.05 85);

  /* Cores de Destaque */
  --color-green: oklch(50% 0.15 142);
  --color-yellow: oklch(84% 0.17 92);

  /* Neutros e Superfícies */
  --color-bg-dark: oklch(14% 0.02 302);
  /* hsl() equivalente a oklch(18% 0.02 302): o gateway Stripe do WooCommerce lê o
     background-color computado do checkout para colorir o Payment Element via
     Appearance API, que só aceita HEX/rgb()/hsl() — oklch() é rejeitado e o campo
     do cartão volta ao tema claro padrão do Stripe. */
  --color-surface-dark: hsl(264 25% 8%);
  --color-surface-dark-hover: oklch(22% 0.03 302);

  --color-bg-light: oklch(98% 0.01 302);
  --color-surface-light: oklch(94% 0.01 302);

  /* Bordas e Divisores */
  --color-border-dark: oklch(25% 0.03 302);
  --color-border-light: oklch(88% 0.01 302);

  /* Tipografia & Cores de Texto */
  /* hsl() equivalente a oklch(96% 0.01 302) — mesmo motivo de --color-surface-dark
     (Appearance API do Stripe não aceita oklch() para colorText). */
  --color-text-primary-dark: hsl(262 36% 96%);
  --color-text-secondary-dark: oklch(82% 0.01 302);
  --color-text-muted-dark: oklch(62% 0.01 302);

  --color-text-primary-light: oklch(16% 0.01 302);
  --color-text-secondary-light: oklch(34% 0.01 302);
  --color-text-muted-light: oklch(56% 0.01 302);

  /* Famílias de Fontes */
  --font-serif: 'Cinzel', Georgia, serif;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Escala Tipográfica (fonte única de verdade — espelhada em
     Website/web/src/styles/global.css e palatine-hub/quartz/styles/custom.scss).
     h1=3xl, h2=2xl, h3/título de seção e card=xl, corpo=md, labels/aux=sm. */
  --text-3xl: clamp(2.2rem, 5vw, 3.8rem);
  --text-2xl: clamp(1.6rem, 4vw, 2.4rem);
  --text-xl: clamp(1.25rem, 3vw, 1.6rem);
  --text-lg: 1.25rem;
  --text-md: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* Espaçamento Escalável */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6.5rem;

  /* Transições */
  --transition-fast: 150ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-normal: 250ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-slow: 400ms cubic-bezier(0.32, 0.72, 0, 1);

  /* Raio de Borda */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

/* ── Botões premium (mesmas classes do site Astro) ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.8rem;
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-bg-dark);
}

.btn-primary:hover {
  background-color: var(--color-gold-hover);
  color: var(--color-bg-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-border-dark);
  color: var(--color-text-primary-dark);
}

.btn-secondary:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border-color: oklch(60% 0.02 302);
  color: var(--color-text-secondary-dark);
}

.btn-outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-1px);
}

/* ── Campos de formulário (mesmo padrão de .form-input do site Astro) ──────── */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  color: var(--color-text-primary-dark);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast);
}

.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-gold);
}

/* ── Card base (usado em login, dashboard e checkout) ──────────────────────── */
.palatine-card {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal);
}

.palatine-card:hover {
  border-color: oklch(76% 0.14 80 / 0.4);
}