/*
 * Routlys — Design Tokens (Web)
 *
 * Fonte canônica: design-system/tokens.json
 * Documentação: design-system/README.md
 *
 * Importe ESTE arquivo ANTES de style.css. Todos os componentes
 * devem referenciar variáveis aqui — nunca hex literais.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ─── Brand (Routlys) — paleta Tailwind, espelha routlys.com ─── */
  --brand-primary: #9333EA;   /* purple-600 — botões e destaques */
  --brand-dark:    #7E22CE;   /* purple-700 — variant escura */
  --brand-light:   #A855F7;   /* purple-500 — hover */
  --accent-magenta: #D946EF;  /* fuchsia-500 — meio do gradient tripla */
  --accent-cyan:    #0EA5E9;  /* sky-500 — fim do gradient (igual hero) */

  /* ─── Superfícies (dark — padrão do produto) ─── */
  --bg-base: #0E0218;
  --bg-elevated: #1A0A2E;
  --bg-surface: #241338;
  --bg-overlay: rgba(14, 2, 24, 0.85);

  /* ─── Texto (dark) ─── */
  --text-primary: #F4F0FA;
  --text-secondary: #B8AFC9;
  --text-muted: #7C7088;

  /* ─── Bordas (dark) ─── */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ─── Semântico ─── */
  --success: #10D9A0;
  --success-bg: rgba(16, 217, 160, 0.12);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --error: #EF4444;
  --error-bg: rgba(239, 68, 68, 0.12);
  --info: #0EA5E9;
  --info-bg: rgba(14, 165, 233, 0.12);

  /* ─── Tipografia ─── */
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', 'Cascadia Code', monospace;

  --text-eyebrow: 11px;
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-h3: 22px;
  --text-h2: 32px;
  --text-h1: 48px;
  --text-display: 64px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-eyebrow: 0.09em;

  /* ─── Spacing (escala 4px) ─── */
  --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;

  /* ─── Border radius ─── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ─── Sombras / glow ─── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  /* glow padrão — moderado (era 0.35, doía o olho aplicado em muitos elementos) */
  --shadow-glow: 0 4px 24px rgba(147, 51, 234, 0.18);
  /* glow forte — usar apenas em CTAs primários */
  --shadow-glow-strong: 0 0 32px rgba(147, 51, 234, 0.35);

  /* ─── Brand soft (variantes pra UI sem saturar) ─── */
  --brand-soft: rgba(147, 51, 234, 0.10);
  --brand-soft-strong: rgba(147, 51, 234, 0.18);
  --brand-text: #E380FF;   /* magenta clareado, AA em fundo --bg-base */

  /* ─── Transições ─── */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Cores intermediárias pra suavizar gradients ─── */
  --bridge-violet: #8B5CF6;   /* violet-500 — entre purple e indigo */
  --bridge-indigo: #6366F1;   /* indigo-500 — entre roxo e cyan, EVITA passar por cinza */

  /* ─── Gradientes — paleta Tailwind do site routlys.com ─── */
  /* gradient quádruplo: roxo → fuchsia → indigo → cyan.
     Adiciona indigo entre fuchsia (#D946EF) e cyan (#0EA5E9) pra evitar
     o "salto" cinza-rosado. Suaviza a transição. */
  --gradient-brand: linear-gradient(135deg,
      var(--brand-primary) 0%,
      var(--accent-magenta) 33%,
      var(--bridge-indigo) 66%,
      var(--accent-cyan) 100%);

  /* gradient triplo cool: roxo → indigo → cyan.
     Indigo no meio dá uma transição natural (purple→indigo→sky é a
     escala Tailwind clássica). Evita o cinza-azulado entre purple e cyan. */
  --gradient-brand-cool: linear-gradient(135deg,
      var(--brand-primary) 0%,
      var(--bridge-indigo) 50%,
      var(--accent-cyan) 100%);

  /* soft: usado em fundos translúcidos sem saturar */
  --gradient-brand-soft: linear-gradient(135deg,
      rgba(147, 51, 234, 0.10),
      rgba(99, 102, 241, 0.07),
      rgba(14, 165, 233, 0.06));

  /* legado pesado roxo → roxo escuro — evitar */
  --gradient-purple: linear-gradient(135deg, var(--brand-primary), var(--brand-dark));
}

/* ─── Tema light (para telas opcionais — landing, impressão) ─── */
[data-theme="light"] {
  --bg-base: #F4F0FA;
  --bg-elevated: #FFFFFF;
  --bg-surface: #EDE6F5;
  --bg-overlay: rgba(244, 240, 250, 0.85);
  --text-primary: #1A0830;
  --text-secondary: #5C4D7A;
  --text-muted: #9085A3;
  --border-subtle: rgba(26, 8, 48, 0.08);
  --border-strong: rgba(26, 8, 48, 0.16);
}

/* ─── Reset tipográfico aplicado globalmente ─── */
html {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* ─── Utilitário: eyebrow badge ─── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  background: var(--brand-primary);
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.eyebrow--success { background: var(--success); }
.eyebrow--warning { background: var(--warning); color: #1A0830; }
.eyebrow--error   { background: var(--error); }
.eyebrow--info    { background: var(--info); color: #1A0830; }