/* Motometria Design System — Tokens v1
   Paleta verde Motometria, tom business.
   Última revisão: 2026-04-23 */

:root {
  /* ============================================================
     BRAND PRIMARY — azul confiança, base de toda a marca master
     ============================================================ */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #2563eb; /* principal */
  --color-primary-600: #1d4ed8;
  --color-primary-700: #1e40af;
  --color-primary-800: #1e3a8a;
  --color-primary-900: #172554;

  /* ============================================================
     BRAND ACCENT — verde acção (CTA, conversão)
     ============================================================ */
  --color-accent-50:  #ecfdf5;
  --color-accent-100: #d1fae5;
  --color-accent-200: #a7f3d0;
  --color-accent-300: #6ee7b7;
  --color-accent-400: #34d399;
  --color-accent-500: #10b981; /* principal */
  --color-accent-600: #059669;
  --color-accent-700: #047857;
  --color-accent-800: #065f46;
  --color-accent-900: #064e3b;

  /* ============================================================
     NEUTRALS — cinzas modernos (slate base)
     ============================================================ */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* ============================================================
     SEMANTIC — estados
     ============================================================ */
  --color-success: #10b981;
  --color-success-bg: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-danger:  #ef4444;
  --color-danger-bg: #fee2e2;
  --color-info:    #3b82f6;
  --color-info-bg: #dbeafe;

  /* ============================================================
     PRODUCT ACCENTS — uma cor por produto 4Me
     ============================================================ */
  --color-mailsign:  #f59e0b; /* âmbar */
  --color-pricer:    #8b5cf6; /* roxo */
  --color-social:    #ec4899; /* rosa */
  --color-slot:      #06b6d4; /* ciano */
  --color-crm:       #10b981; /* verde */
  --color-whatsapp:  #25d366; /* verde WA */
  --color-k4m:       #6366f1; /* índigo */
  --color-bugreport: #64748b; /* slate */

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* escala tipográfica */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.5rem;    /* 24 */
  --fs-xl:   2rem;      /* 32 */
  --fs-2xl:  2.5rem;    /* 40 */
  --fs-3xl:  3.5rem;    /* 56 */

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* letter spacing */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-normal: 0;
  --ls-wide:  0.025em;

  /* ============================================================
     SPACING — escala coerente
     ============================================================ */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  3rem;     /* 48 */
  --sp-8:  4rem;     /* 64 */
  --sp-9:  6rem;     /* 96 */

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 0 0 4px rgba(37, 99, 235, 0.15);
  --shadow-glow-accent: 0 0 0 4px rgba(16, 185, 129, 0.2);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --trans-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --nav-h: 72px;

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-base:    1;
  --z-nav:     100;
  --z-dropdown:200;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-cookie:  1200;

  /* ============================================================
     ALIASES (semantic, theme-aware)
     ============================================================ */
  --bg-page:    var(--color-neutral-0);
  --bg-elevated:var(--color-neutral-50);
  --bg-muted:   var(--color-neutral-100);
  --bg-card:    var(--color-neutral-0);
  --border-subtle: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);
  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-muted:     var(--color-neutral-500);
  --text-on-primary:var(--color-neutral-0);
  --text-on-accent: var(--color-neutral-0);
}

/* ============================================================
   DARK MODE — opt-in via [data-theme="dark"] (html tag)
   ============================================================ */
[data-theme="dark"] {
  --bg-page:    var(--color-neutral-950);
  --bg-elevated:var(--color-neutral-900);
  --bg-muted:   var(--color-neutral-800);
  --bg-card:    var(--color-neutral-900);
  --border-subtle: var(--color-neutral-800);
  --border-strong: var(--color-neutral-700);
  --text-primary:   var(--color-neutral-50);
  --text-secondary: var(--color-neutral-300);
  --text-muted:     var(--color-neutral-400);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   RESET mínimo funcional (progressive enhancement)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* typography helpers */
.t-display { font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: 1.05; }
.t-h1      { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
.t-h2      { font-size: var(--fs-xl);  font-weight: var(--fw-bold); }
.t-h3      { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); }
.t-body    { font-size: var(--fs-base); color: var(--text-primary); }
.t-lead    { font-size: var(--fs-md); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.t-muted   { color: var(--text-muted); font-size: var(--fs-sm); }

@media (max-width: 768px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.875rem;
    --fs-xl:  1.5rem;
    --fs-lg:  1.25rem;
  }
}