/*
  DigitalBoost · Design tokens v1.0 (outubro 2026)
  Fonte única para site, CRM e PDFs. Espelhado em tokens.json.
  Modo escuro é o padrão da marca. Modo claro: data-theme="light" no <html> (ou num contentor).
  Fontes (Google Fonts):
  https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap
*/

:root {
  /* Primitivas: laranja */
  --db-orange-50: #fff6eb;
  --db-orange-100: #ffe9cc;
  --db-orange-200: #ffd49b;
  --db-orange-300: #ffc16a;
  --db-orange-400: #ffae4a;
  --db-orange-500: #ff9d2e;
  --db-orange-600: #e07c12;
  --db-orange-700: #b8620a;
  --db-orange-800: #9a4f00;
  --db-orange-900: #6e3800;

  /* Primitivas: grafites (escuro) */
  --db-graphite-950: #0a0a0c;
  --db-graphite-900: #101013;
  --db-graphite-850: #16161b;
  --db-graphite-800: #1d1d23;
  --db-graphite-700: #2a2a31;
  --db-stone-400: #8b887f;
  --db-stone-300: #bcb9b1;
  --db-stone-100: #f4f2ee;

  /* Primitivas: papel (claro) */
  --db-paper-50: #ffffff;
  --db-paper-100: #f7f5f0;
  --db-paper-200: #efebe3;
  --db-paper-300: #e4dfd5;
  --db-ink-700: #6b675f;
  --db-ink-800: #45423c;
  --db-ink-950: #0a0a0c;

  /* Primitivas: estados */
  --db-green-400: #3ccf8e;
  --db-green-700: #13795b;
  --db-amber-400: #f5c84b;
  --db-amber-700: #835c00;
  --db-red-400: #ff6b5b;
  --db-red-700: #b42f2b;
  --db-whatsapp: #25d366;

  /* Semânticos: modo escuro (padrão) */
  --color-bg: var(--db-graphite-950);
  --color-surface-1: var(--db-graphite-900);
  --color-surface-2: var(--db-graphite-850);
  --color-surface-3: var(--db-graphite-800);
  --color-surface-4: var(--db-graphite-700);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-text: var(--db-stone-100);
  --color-text-muted: var(--db-stone-300);
  --color-text-subtle: var(--db-stone-400);
  --color-heading: #ffffff;

  --color-accent: var(--db-orange-500);
  --color-accent-hover: var(--db-orange-300);
  --color-accent-pressed: var(--db-orange-600);
  --color-accent-text: var(--db-orange-500);
  --color-on-accent: var(--db-graphite-950);
  --color-accent-ghost: rgba(255, 157, 46, 0.12);
  --color-accent-line: rgba(255, 157, 46, 0.28);
  --color-focus-ring: rgba(255, 157, 46, 0.55);

  --color-success: var(--db-green-400);
  --color-success-bg: rgba(60, 207, 142, 0.12);
  --color-warning: var(--db-amber-400);
  --color-warning-bg: rgba(245, 200, 75, 0.12);
  --color-error: var(--db-red-400);
  --color-error-bg: rgba(255, 107, 91, 0.12);

  /* Tipografia */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-email: Arial, Helvetica, sans-serif;

  --text-2xs: 0.75rem;     /* 12px etiquetas */
  --text-xs: 0.8125rem;    /* 13px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px corpo */
  --text-md: 1.125rem;     /* 18px corpo destacado */
  --text-lg: 1.25rem;      /* 20px h5 */
  --text-xl: 1.5rem;       /* 24px h4 */
  --text-2xl: 1.875rem;    /* 30px h3 */
  --text-3xl: 2.375rem;    /* 38px h2 mobile */
  --text-4xl: 3rem;        /* 48px h2 */
  --text-5xl: 4rem;        /* 64px h1 */
  --text-6xl: 5.25rem;     /* 84px display */
  --text-h1-fluid: clamp(2.25rem, 5.4vw, 4rem);
  --text-h2-fluid: clamp(1.875rem, 3.7vw, 3rem);

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

  --leading-tight: 1.04;
  --leading-snug: 1.12;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-relaxed: 1.7;

  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-body: 0;
  --tracking-label: 0.12em;

  /* Espaçamento (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --page-gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 128px);
  --print-margin: 18mm;

  /* Raios */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-input: 12px;
  --radius-media: 16px;
  --radius-card: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevação */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 10px 40px rgba(255, 157, 46, 0.25);

  /* Movimento */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Elementos gráficos */
  --angle-trajectory: 30deg;
  --glow-accent: radial-gradient(60% 60% at 50% 40%, rgba(255, 157, 46, 0.18), transparent 70%);

  /* Aliases legados (landing v2), para migração sem partir nada */
  --bg: var(--color-bg);
  --bg-1: var(--color-surface-1);
  --bg-2: var(--color-surface-2);
  --bg-3: var(--color-surface-3);
  --line: var(--color-border);
  --line-2: var(--color-border-strong);
  --txt: var(--color-text);
  --txt-2: var(--color-text-muted);
  --txt-3: var(--color-text-subtle);
  --accent: var(--color-accent);
  --accent-hi: var(--color-accent-hover);
  --accent-lo: var(--color-accent-pressed);
  --accent-ghost: var(--color-accent-ghost);
  --accent-line: var(--color-accent-line);
  --wa: var(--db-whatsapp);
  --danger: var(--color-error);
  --r-card: var(--radius-card);
  --r-media: var(--radius-media);
  --r-input: var(--radius-input);

  color-scheme: dark;
}

/* Modo claro: CRM, PDFs, documentos para impressão */
[data-theme="light"] {
  --color-bg: var(--db-paper-100);
  --color-surface-1: var(--db-paper-50);
  --color-surface-2: var(--db-paper-200);
  --color-surface-3: var(--db-paper-300);
  --color-surface-4: #d6d0c4;
  --color-border: rgba(10, 10, 12, 0.10);
  --color-border-strong: rgba(10, 10, 12, 0.18);
  --color-text: var(--db-ink-950);
  --color-text-muted: var(--db-ink-800);
  --color-text-subtle: var(--db-ink-700);
  --color-heading: var(--db-ink-950);

  --color-accent: var(--db-orange-500);
  --color-accent-hover: var(--db-orange-400);
  --color-accent-pressed: var(--db-orange-600);
  --color-accent-text: var(--db-orange-800);
  --color-on-accent: var(--db-graphite-950);
  --color-accent-ghost: rgba(255, 157, 46, 0.14);
  --color-accent-line: rgba(224, 124, 18, 0.35);
  --color-focus-ring: rgba(224, 124, 18, 0.5);

  --color-success: var(--db-green-700);
  --color-success-bg: rgba(19, 121, 91, 0.10);
  --color-warning: var(--db-amber-700);
  --color-warning-bg: rgba(131, 92, 0, 0.10);
  --color-error: var(--db-red-700);
  --color-error-bg: rgba(180, 47, 43, 0.10);

  --shadow-1: 0 1px 2px rgba(10, 10, 12, 0.06), 0 8px 24px rgba(10, 10, 12, 0.08);
  --shadow-2: 0 2px 4px rgba(10, 10, 12, 0.06), 0 24px 60px rgba(10, 10, 12, 0.12);

  color-scheme: light;
}

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