/* =========================================================================
   Advogado AI — Design Tokens
   Aesthetic: juridical + technological. Deep ink, graphite, off-white,
   with a cool-tech accent. Editorial serif italics + modern sans for UI.
   ========================================================================= */

:root {
  /* ── Neutrals ───────────────────────────────────────────────────────── */
  --ink-950: #0A0F1C;       /* near-black with blue undertone */
  --ink-900: #0E1424;       /* hero dark / premium panels */
  --ink-800: #141B2E;
  --ink-700: #1E2638;
  --ink-600: #2A3447;
  --graphite-500: #475061;
  --graphite-400: #6B7387;
  --graphite-300: #97A0B2;
  --graphite-200: #C7CDD9;
  --graphite-100: #E4E7EE;
  --paper-50:  #F6F7FA;     /* default page bg (off-white, cool) */
  --paper-25:  #FBFBFD;
  --white:     #FFFFFF;

  /* ── Brand & accents ────────────────────────────────────────────────── */
  --brand-900: #0B2545;     /* deep juridical blue */
  --brand-800: #11315F;
  --brand-700: #173E7C;
  --brand-600: #1E4F9E;
  --brand-500: #2A6FDB;

  /* Accent (overridable via --accent / --accent-soft set in body[data-accent]) */
  --accent-cyan-500: #06B6D4;
  --accent-cyan-400: #22D3EE;
  --accent-cyan-50:  #ECFEFF;

  --accent-green-500: #14B88A;
  --accent-green-400: #2DD4A8;
  --accent-green-50:  #ECFDF5;

  --accent-purple-500: #6D5BE3;
  --accent-purple-400: #8B7BF0;
  --accent-purple-50:  #F1EEFF;

  /* default = cyan */
  --accent:       var(--accent-cyan-500);
  --accent-hi:    var(--accent-cyan-400);
  --accent-soft:  var(--accent-cyan-50);

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --bg:          var(--paper-50);
  --bg-elev:     var(--white);
  --bg-sunken:   #EEF0F5;
  --fg:          var(--ink-950);
  --fg-muted:    var(--graphite-500);
  --fg-subtle:   var(--graphite-400);
  --border:      #E4E7EE;
  --border-strong: #CED3DE;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-display: "Newsreader", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Geist", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.015em;
  --tracking-wide:  0.08em;

  /* ── Radius / shadow ─────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  --shadow-xs: 0 1px 2px rgba(11,37,69,0.04);
  --shadow-sm: 0 2px 6px rgba(11,37,69,0.05), 0 1px 2px rgba(11,37,69,0.04);
  --shadow-md: 0 12px 24px -12px rgba(11,37,69,0.12), 0 4px 8px -4px rgba(11,37,69,0.05);
  --shadow-lg: 0 30px 60px -20px rgba(11,37,69,0.20), 0 12px 24px -12px rgba(11,37,69,0.08);
  --shadow-glow: 0 0 0 1px rgba(6,182,212,0.20), 0 16px 40px -12px rgba(6,182,212,0.25);

  /* ── Layout ─────────────────────────────────────────────────────── */
  --max-w: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* Accent variants */
body[data-accent="cyan"]   { --accent: var(--accent-cyan-500);   --accent-hi: var(--accent-cyan-400);   --accent-soft: var(--accent-cyan-50);   }
body[data-accent="green"]  { --accent: var(--accent-green-500);  --accent-hi: var(--accent-green-400);  --accent-soft: var(--accent-green-50);  }
body[data-accent="purple"] { --accent: var(--accent-purple-500); --accent-hi: var(--accent-purple-400); --accent-soft: var(--accent-purple-50); }

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }

::selection { background: var(--accent); color: var(--ink-950); }

/* Display headings */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
}
.h-display em {
  font-style: italic;
  font-variation-settings: "opsz" 36;
  color: var(--brand-700);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--graphite-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--graphite-300);
  display: inline-block;
}

/* =========================================================================
   Layout utilities
   ========================================================================= */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding: clamp(64px, 8vw, 120px) 0; }
.section-tight { padding: clamp(48px, 6vw, 88px) 0; }

/* Surface tones */
.surface-dark {
  background: var(--ink-900);
  color: #E8ECF4;
  --fg: #E8ECF4;
  --fg-muted: #A3ACBF;
  --fg-subtle: #6B7387;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --bg-elev: #141B2E;
}
.surface-sunken { background: var(--bg-sunken); }
.surface-paper  { background: var(--bg); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-full);
  font-weight: 540;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink-950);
  color: var(--white);
}
.btn-primary:hover { background: var(--ink-800); box-shadow: var(--shadow-md); }

.btn-accent {
  background: var(--accent);
  color: var(--ink-950);
  font-weight: 600;
}
.btn-accent:hover { background: var(--accent-hi); }

.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(11,37,69,0.04); }
.surface-dark .btn-ghost:hover { background: rgba(255,255,255,0.06); }

.btn-link {
  color: inherit;
  height: auto;
  padding: 0;
  border-radius: 0;
  font-weight: 540;
}
.btn-link::after {
  content: "→";
  transition: transform .2s ease;
}
.btn-link:hover::after { transform: translateX(4px); }

.btn-lg { height: 52px; padding: 0 22px; font-size: 15.5px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }

/* =========================================================================
   Cards
   ========================================================================= */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.card-pad { padding: 22px; }
.card-pad-lg { padding: 28px; }

/* =========================================================================
   Chips / tags
   ========================================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--border);
}
.surface-dark .chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: #C7CDD9; }
.chip-accent {
  background: var(--accent-soft);
  color: var(--brand-800);
  border-color: transparent;
}
.surface-dark .chip-accent {
  background: rgba(6,182,212,0.12);
  color: var(--accent-hi);
}
.chip-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* Status pills (course cards) */
.status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
}
.status.in-breve   { background: rgba(11,37,69,0.06); color: var(--brand-800); }
.status.disponivel { background: var(--accent-soft);  color: var(--brand-800); }
.status.lista      { background: rgba(109,91,227,0.10); color: #4B3FAE; }
.surface-dark .status.in-breve   { background: rgba(255,255,255,0.08); color: #C7CDD9; }
.surface-dark .status.disponivel { background: rgba(6,182,212,0.15); color: var(--accent-hi); }
.surface-dark .status.lista      { background: rgba(139,123,240,0.18); color: #B9AFFF; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =========================================================================
   Helper text styles
   ========================================================================= */
.lede { color: var(--fg-muted); font-size: 17.5px; line-height: 1.55; max-width: 60ch; }
.muted { color: var(--fg-muted); }
.hairline { height: 1px; background: var(--border); width: 100%; }

/* =========================================================================
   Page header — internal pages
   ========================================================================= */
.page-hero {
  padding: clamp(60px, 8vw, 120px) 0 clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: 1.06;
  font-size: clamp(32px, 4.5vw, 56px);
  margin: 0;
}
.page-hero h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 36;
  color: var(--brand-700);
}
.page-hero .lede {
  margin-top: 20px;
}
.page-content {
  padding: clamp(48px, 6vw, 80px) 0;
}

/* =========================================================================
   Forms — contact + lead capture
   ========================================================================= */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 13.5px;
  font-weight: 540;
  color: var(--fg);
}
.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
}
.form-input:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.12);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--graphite-300);
}
.form-textarea {
  resize: vertical;
  min-height: 140px;
}
.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'><path fill='%236B7387' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color .15s ease;
}
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.12);
}

/* =========================================================================
   Legal pages
   ========================================================================= */
.legal-content h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
  color: var(--fg);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  margin: 0 0 16px;
  color: var(--fg-muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.legal-content ul {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--fg-muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.legal-content li { margin-bottom: 6px; }
.legal-content strong {
  color: var(--fg);
  font-weight: 560;
}

/* =========================================================================
   Tool card (ferramentas page)
   ========================================================================= */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
}
.tool-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   Animations
   ========================================================================= */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.18);
  animation: pulseDot 2.2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  body { font-size: 15.5px; }
}