/* ==========================================================================
   Spectra — tokens do Design System do Compasso (fonte única de verdade)
   Origem: Spectra Design System (paleta forest + emerald, DM Sans 300).
   Adaptações e lacunas documentadas em docs/design-system/spectra.md.
   Apps: importar este arquivo. LP: cópia gerada em apps/lp/css/spectra.css
   (node packages/design-tokens/sincronizar.mjs) — não editar a cópia.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* ── Primitivos (não usar direto nos componentes) ─────────────────────── */
  --forest-50: #f2f8f6;
  --forest-100: #e1efe8;
  --forest-200: #c3ddcf;
  --forest-300: #96c3ad;
  --forest-400: #62a386;
  --forest-500: #3f8568;
  --forest-600: #2f6a52;
  --forest-700: #265543;
  --forest-800: #224437;
  --forest-900: #1d392f;
  --forest-950: #0a1814;
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-900: #064e3b;
  --emerald-950: #022c22;

  /* ── Superfícies ──────────────────────────────────────────────────────── */
  --color-bg: var(--forest-50);                       /* Page ground */
  --color-surface: #ffffff;                           /* Raised card */
  --color-surface-subtle: var(--forest-50);
  --color-surface-muted: var(--forest-100);
  --color-surface-dark: var(--forest-950);            /* Dark section */
  --color-surface-dark-raised: rgb(29 57 47 / 0.2);   /* Card on dark */
  --color-surface-dark-hover: rgb(29 57 47 / 0.4);
  --color-surface-selected-dark: var(--forest-800);   /* Selected segment */
  --color-glass-light: rgb(255 255 255 / 0.6);
  --color-glass-dark: rgb(10 24 20 / 0.8);
  --color-overlay: rgb(10 24 20 / 0.6);               /* Doc image fade / scrim */
  --color-overlay-strong: rgb(2 6 4 / 0.82);          /* fundo de diálogo modal */
  --color-header-scrolled: rgb(0 0 0 / 0.95);         /* Scrolled header */
  --color-pill-on-media: rgb(0 0 0 / 0.3);            /* Pill on media */
  --color-input-on-dark: rgb(255 255 255 / 0.05);
  --color-glow-accent: rgb(16 185 129 / 0.1);         /* Closing band top glow */
  --color-glow-deep: rgb(6 78 59 / 0.2);              /* Pricing band centre glow */
  --color-hairline-light: rgb(10 24 20 / 0.08);       /* 12 colunas no hero */
  --color-watermark: rgb(29 57 47 / 0.03);            /* marca d'água do rodapé */
  --color-text-on-dark-nav: rgb(255 255 255 / 0.8);   /* Nav link */
  --color-text-on-dark-faint: rgb(255 255 255 / 0.7);

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --color-text: var(--forest-950);                    /* Primary on light */
  --color-text-strong: var(--forest-800);             /* Hero accent line */
  --color-text-body: var(--forest-600);               /* Body on light */
  --color-text-muted: var(--forest-600);              /* [adapt.] forest-500 reprova AA em texto pequeno */
  --color-text-subtle: var(--forest-500);             /* só ≥18px ou decorativo */
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-strong: var(--forest-100);     /* Quote on dark */
  --color-text-on-dark-body: var(--forest-300);
  --color-text-on-dark-muted: var(--forest-400);
  --color-text-on-accent: var(--emerald-950);         /* rótulo do CTA em gradiente */

  /* ── Marca / destaque ─────────────────────────────────────────────────── */
  --color-accent: var(--emerald-700);                 /* [adapt.] texto/ícone esmeralda sobre claro (AA) */
  --color-accent-decorative: var(--emerald-600);      /* Accent on light — só ícones/grandes */
  --color-accent-on-dark: var(--emerald-400);         /* Accent on dark */
  --color-accent-fill: var(--emerald-500);            /* discos, tags */
  --color-accent-soft: var(--emerald-50);
  --color-accent-soft-strong: rgb(209 250 229 / 0.5); /* Index chip ground */
  --color-accent-edge: rgb(16 185 129 / 0.3);
  --gradient-cta: linear-gradient(to right, #d1fae5, #34d399);          /* Primary CTA */
  --gradient-cta-featured: linear-gradient(to right, #10b981, #059669); /* Featured CTA */
  --gradient-featured-card: linear-gradient(to bottom, rgb(29 57 47 / 0.8), rgb(10 24 20 / 0.8));

  /* Ação sólida (Dark solid · on light) */
  --color-action: var(--forest-950);
  --color-action-hover: var(--emerald-700);           /* [adapt.] emerald-600 reprova AA com texto branco */
  --color-action-text: #ffffff;
  --color-action-secondary: var(--forest-100);
  --color-action-secondary-hover: var(--forest-200);
  --color-action-secondary-text: var(--forest-950);

  /* ── Bordas ───────────────────────────────────────────────────────────── */
  --color-border: rgb(29 57 47 / 0.1);                /* Divider on light */
  --color-border-subtle: rgb(29 57 47 / 0.05);        /* Card edge on light */
  --color-border-strong: var(--forest-200);           /* divisores mais marcados (decorativo) */
  --color-border-input: var(--forest-500);            /* [adapt.] campos: 4.4:1 sobre branco (WCAG 1.4.11) */
  --color-border-chip: var(--forest-100);
  --color-border-on-dark: rgb(255 255 255 / 0.1);
  --color-border-on-dark-subtle: rgb(255 255 255 / 0.05);

  /* ── Feedback [lacuna: Spectra não define; Tailwind default, contraste AA] ─ */
  --color-success: var(--emerald-700);
  --color-success-soft: var(--emerald-50);
  --color-warning: #b45309;   /* amber-700 */
  --color-warning-soft: #fffbeb;
  --color-danger: #b91c1c;    /* red-700 */
  --color-danger-soft: #fef2f2;
  --color-info: #0369a1;      /* sky-700 */
  --color-info-soft: #f0f9ff;

  /* ── Categorias (modalidades na agenda) [lacuna: Spectra não define;
        tons Tailwind 700 harmonizados com forest, todos ≥ 4.5:1 com texto branco] ── */
  --color-cat-1: var(--emerald-700);
  --color-cat-2: #6d28d9;   /* violet-700 */
  --color-cat-3: #b45309;   /* amber-700 */
  --color-cat-4: #0369a1;   /* sky-700 */
  --color-cat-5: #be123c;   /* rose-700 */
  --color-cat-6: #4d7c0f;   /* lime-700 */
  --color-cat-7: #0f766e;   /* teal-700 */
  --color-cat-8: #a21caf;   /* fuchsia-700 */

  /* ── Espectro (efeito do Hero ground: raios prismáticos) ─────────────── */
  --color-spectrum-light: #ffffff;
  --color-spectrum-cool: var(--emerald-200);
  --color-spectrum-warm: #fecdd3;   /* rose-200, franja quente da aberração */
  --color-mist-deep: rgb(38 85 67 / 0.45);   /* forest-700/45 — faixa de "colinas" na névoa */

  /* ── Foco [lacuna: Spectra não define] ────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgb(16 185 129 / 0.35);
  --focus-outline: 2px solid var(--emerald-700);

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --font-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-micro: 0.625rem;  /* 10px  Micro label */
  --text-xs: 0.75rem;      /* Eyebrow, chip, meta */
  --text-sm: 0.875rem;     /* Body · Text 2, nav */
  --text-base: 1rem;
  --text-lg: 1.125rem;     /* Lead */
  --text-xl: 1.25rem;      /* H4 · Feature */
  --text-2xl: 1.5rem;      /* H3 · Glass card */
  --text-3xl: 1.875rem;    /* H3 · Media card */
  --text-4xl: 2.25rem;     /* H2 · Section (mobile), Stat */
  --text-5xl: 3rem;        /* H2 · Section */
  --text-6xl: 3.75rem;     /* H2 · Feature / Price */
  --text-7xl: 4.5rem;      /* H2 · Closing band */
  --text-8xl: 6rem;        /* Display */

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

  --leading-display: 0.9;
  --leading-heading: 0.95;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Espaçamento (base 4px) ───────────────────────────────────────────── */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --container-max: 80rem;
  --gutter: var(--space-4);

  /* ── Raios ────────────────────────────────────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;     /* botões sólidos */
  --radius-2xl: 1rem;       /* quote card, media */
  --radius-3xl: 1.5rem;     /* process / media card */
  --radius-4xl: 2rem;       /* glass / plan card */
  --radius-5xl: 2.5rem;     /* raised panel, featured */
  --radius-full: 9999px;

  /* ── Elevação ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(29 57 47 / 0.05);
  --shadow-card: 0 25px 50px -12px rgb(29 57 47 / 0.05);   /* shadow-2xl shadow-forest-900/5 */
  --shadow-glass: 0 25px 50px -12px rgb(10 24 20 / 0.2);
  --shadow-cta: 0 10px 15px -3px rgb(16 185 129 / 0.3);
  --shadow-cta-hover: 0 10px 15px -3px rgb(16 185 129 / 0.5);
  --shadow-action-hover: 0 10px 15px -3px rgb(5 150 105 / 0.2);
  --shadow-pill-dark: 0 0 40px -10px rgb(255 255 255 / 0.3);

  /* ── Vidro ────────────────────────────────────────────────────────────── */
  --blur-glass-light: 12px;
  --blur-glass-dark: 40px;

  /* ── Movimento ────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-accordion: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-reveal: 1000ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-reveal: 0ms;
  }
}