/* LurIA — tokens do design system (gerado a partir de tokens.json, v2).
   Aliases como {brand} viram var(--brand). Tema claro aqui; o escuro, no fim do
   arquivo, só troca as cores (mesma paleta escura da página Como contratar). */
:root {
  /* Cor */
  --surface: #ffffff;
  --surface-alt: #f6f8fb;
  --surface-raised: #ffffff;
  --ink: #0b0d12;
  --ink-muted: #5a6275;
  --line: #e3e7ee;
  --line-strong: #8a93a6;
  --brand: #5b3df5;
  --brand-hover: #4a2ee0;
  --brand-soft: #efebff;
  --brand-ink: #3b22c4;
  --on-brand: #ffffff;
  --inverse: #0b0d12;
  --on-inverse: #ffffff;
  --on-inverse-muted: #aab2c4;
  --brand-on-inverse: #b7abff;
  --success: #16794a;
  --success-soft: #e6f4ec;
  --warning: #7a4f00;
  --warning-soft: #fff3dc;
  --focus-ring: var(--brand);

  /* Tipografia */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --type-display: 700 56px/1.08 var(--font-sans);
  --type-display-tracking: -0.03em;
  --type-title-lg: 700 40px/1.12 var(--font-sans);
  --type-title-lg-tracking: -0.025em;
  --type-number: 700 44px/1 var(--font-sans);
  --type-number-tracking: -0.03em;
  --type-title-md: 700 20px/28px var(--font-sans);
  --type-title-md-tracking: -0.01em;
  --type-lead: 400 19px/30px var(--font-sans);
  --type-body: 400 16px/26px var(--font-sans);
  --type-small: 500 14px/22px var(--font-sans);
  --type-overline: 700 13px/18px var(--font-sans);
  --type-overline-tracking: 0.02em;

  /* Espaço */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Raio */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Sombra */
  --shadow-card: 0 1px 2px rgba(11,13,18,0.04), 0 8px 24px -12px rgba(11,13,18,0.10);
  --shadow-brand: 0 10px 24px -10px rgba(91,61,245,0.55);

  /* Layout */
  --container: 1200px;
  --container-text: 640px;
}

/* Tema escuro: segue o sistema, a menos que o botão tenha salvo "light"
   (data-theme no <html>). Os dois blocos abaixo têm os mesmos valores. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0b0d12;
    --surface-alt: #11131a;
    --surface-raised: #161822;
    --ink: #f4f5f7;
    --ink-muted: #aab2c4;
    --line: #262a35;
    --line-strong: #5a6275;
    --brand: #b7abff;
    --brand-hover: #cdc4ff;
    --brand-soft: rgba(183,171,255,0.13);
    --brand-ink: #cdc4ff;
    --on-brand: #0b0d12;
    --inverse: #1a1535;
    --on-inverse: #f4f5f7;
    --on-inverse-muted: #b9b3d6;
    --brand-on-inverse: #b7abff;
    --success: #5fd39a;
    --success-soft: rgba(95,211,154,0.12);
    --warning: #f2c066;
    --warning-soft: rgba(242,192,102,0.12);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-brand: 0 10px 24px -10px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0b0d12;
  --surface-alt: #11131a;
  --surface-raised: #161822;
  --ink: #f4f5f7;
  --ink-muted: #aab2c4;
  --line: #262a35;
  --line-strong: #5a6275;
  --brand: #b7abff;
  --brand-hover: #cdc4ff;
  --brand-soft: rgba(183,171,255,0.13);
  --brand-ink: #cdc4ff;
  --on-brand: #0b0d12;
  --inverse: #1a1535;
  --on-inverse: #f4f5f7;
  --on-inverse-muted: #b9b3d6;
  --brand-on-inverse: #b7abff;
  --success: #5fd39a;
  --success-soft: rgba(95,211,154,0.12);
  --warning: #f2c066;
  --warning-soft: rgba(242,192,102,0.12);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-brand: 0 10px 24px -10px rgba(0,0,0,0.6);
}