/* ============================================================
   ALIS AI — Design Tokens
   Cores, tipografia, espaçamento, raios, sombras
   Fontes: Geist + Geist Mono (Google Fonts, OFL)
   Cor de marca: #7C5CFF (roxo elétrico)
   ============================================================ */

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

:root {
  /* ---------- FONT FAMILIES ---------- */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- PURPLE / BRAND SCALE ---------- */
  --purple-50:  #f5f3ff;
  --purple-100: #ece7ff;
  --purple-200: #dcd2ff;
  --purple-300: #c3b0ff;
  --purple-400: #a585ff;
  --purple-500: #7c5cff;   /* ← cor de marca */
  --purple-600: #6a47e6;
  --purple-700: #5836c4;
  --purple-800: #472c9c;
  --purple-900: #38267d;

  /* ---------- NEUTRALS (zinc levemente frio) ---------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f8f8fb;
  --gray-100: #f1f1f5;
  --gray-200: #e6e6ed;
  --gray-300: #d4d4de;
  --gray-400: #a1a1ad;
  --gray-500: #71717e;
  --gray-600: #52525c;
  --gray-700: #3f3f47;
  --gray-800: #27272d;
  --gray-900: #18181c;
  --gray-950: #0d0d10;

  /* ---------- SEMANTIC STATUS ---------- */
  --green-50:  #e9f9f0;   /* atendido / confirmado / online */
  --green-100: #cdf2de;
  --green-500: #16a45e;
  --green-600: #128a4f;

  --amber-50:  #fef4e4;   /* aguardando / pendente */
  --amber-100: #fce4bf;
  --amber-500: #f59e0b;
  --amber-600: #d98307;

  --red-50:    #fdeaea;   /* urgência / cancelamento / erro */
  --red-100:   #fad1d2;
  --red-500:   #e5484d;
  --red-600:   #cc363b;

  --blue-50:   #e8f1ff;   /* informativo */
  --blue-500:  #3b82f6;

  /* ---------- SEMANTIC ROLES (light theme = padrão) ---------- */
  --bg:           var(--gray-0);
  --bg-subtle:    var(--gray-50);
  --bg-muted:     var(--gray-100);
  --bg-inset:     var(--gray-25);
  --bg-invert:    var(--gray-950);   /* faixas escuras (CTA, footer) */

  --fg1:          var(--gray-900);   /* títulos / texto principal */
  --fg2:          var(--gray-600);   /* texto secundário / corpo */
  --fg3:          var(--gray-500);   /* texto auxiliar */
  --fg-muted:     var(--gray-400);   /* placeholder / desabilitado */
  --fg-on-invert: var(--gray-50);    /* texto sobre fundo escuro */

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-invert: rgba(255,255,255,0.10);

  --primary:        var(--purple-500);
  --primary-hover:  var(--purple-600);
  --primary-press:  var(--purple-700);
  --primary-subtle: var(--purple-50);
  --primary-fg:     #ffffff;          /* texto sobre roxo */
  --ring:           rgba(124,92,255,0.40);

  /* ---------- TYPE SCALE (px) ----------
     Escala 1.25 com ajustes para landing.
     Títulos: Geist 600, tracking negativo, leading apertado. */
  --text-display: 4rem;      /* 64px — hero H1 */
  --text-h1:      2.75rem;   /* 44px */
  --text-h2:      2rem;      /* 32px */
  --text-h3:      1.5rem;    /* 24px */
  --text-h4:      1.25rem;   /* 20px */
  --text-lg:      1.125rem;  /* 18px — lead / subhead */
  --text-base:    1rem;      /* 16px — corpo */
  --text-sm:      0.875rem;  /* 14px */
  --text-xs:      0.8125rem; /* 13px — caption / eyebrow */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.03em;  /* display */
  --tracking-snug:   -0.02em;  /* headings */
  --tracking-normal: -0.01em;  /* body */
  --tracking-wide:   0.08em;   /* eyebrow / mono labels */

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

  /* ---------- SPACING (base 4px) ---------- */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  --container:    1200px;  /* largura máx. de conteúdo */
  --container-sm: 760px;   /* texto corrido / prose */

  /* ---------- RADII ---------- */
  --radius-sm:  6px;
  --radius-md:  8px;    /* botões, inputs */
  --radius-lg:  12px;   /* cards */
  --radius-xl:  16px;   /* cards grandes / mockups */
  --radius-2xl: 22px;   /* painéis hero */
  --radius-full: 999px; /* pills, badges, avatares */

  /* ---------- SHADOWS (sutis: borda + sombra leve) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,16,24,0.05);
  --shadow-sm: 0 1px 3px rgba(16,16,24,0.06), 0 1px 2px rgba(16,16,24,0.04);
  --shadow-md: 0 6px 16px rgba(16,16,24,0.07);
  --shadow-lg: 0 14px 40px rgba(16,16,24,0.10);
  --shadow-xl: 0 28px 70px rgba(16,16,24,0.14);
  --shadow-glow: 0 8px 26px rgba(124,92,255,0.32);    /* botão primário hover */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* padrão (entradas) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   ELEMENT DEFAULTS / SEMANTIC TYPE
   Aplique .alis-prose num container, ou use as classes utilitárias.
   ============================================================ */

.alis-root,
.alis-prose {
  font-family: var(--font-sans);
  color: var(--fg1);
  font-feature-settings: "cv01", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
}

.t-display {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}

.t-h1 { font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); text-wrap: balance; }
.t-h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); text-wrap: balance; }
.t-h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.t-h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }

.t-lead { font-size: var(--text-lg); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg2); text-wrap: pretty; }
.t-body { font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg2); text-wrap: pretty; }
.t-sm   { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg2); }
.t-caption { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg3); }
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0; color: var(--fg1); }

@media (max-width: 640px) {
  :root { --text-display: 2.75rem; --text-h1: 2.25rem; --text-h2: 1.75rem; }
}