/* tokens.css — design tokens (invariantes do master + paleta Minha Renda).
   Único parametrizável por projeto: qual acento vira --primary. Aqui = verde (PRD §25.5). */

/* ════════ FONTES LOCAIS (Geist + Geist Mono, woff2 em /assets/fonts) ════════ */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/Geist-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/assets/fonts/Geist-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/assets/fonts/Geist-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/assets/fonts/Geist-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/assets/fonts/GeistMono-SemiBold.woff2') format('woff2');
}

:root {
  /* ════════ TIPOGRAFIA ════════ */
  /* Geist baixada localmente (woff2 em /assets/fonts) — sistema só como fallback. */
  --font-sans: 'Geist', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Courier New', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;

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

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.1em;

  /* ════════ CORES NEUTRAS ════════ */
  --neutral-0:   #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  /* ════════ MARCA (paleta do PRD §25.5 — provisória, ajustar c/ logo da cliente) ════════ */
  --brand-green-50:   #ecfdf5;
  --brand-green-100:  #d1fae5;
  --brand-green-500:  #16a34a;   /* primária — dinheiro/crescimento */
  --brand-green-600:  #15803d;
  --brand-green-700:  #166534;

  --brand-blue-50:    #eff6ff;
  --brand-blue-500:   #2563eb;   /* secundária — confiança */
  --brand-blue-600:   #1d4ed8;

  --brand-orange-50:  #fff7ed;
  --brand-orange-500: #f97316;   /* acento — vendas/energia */
  --brand-orange-600: #ea580c;

  --brand-amber-50:   #fffbeb;
  --brand-amber-400:  #facc15;   /* alerta/destaque */
  --brand-amber-500:  #f59e0b;

  --brand-red-50:     #fef2f2;
  --brand-red-100:    #fee2e2;
  --brand-red-500:    #ef4444;
  --brand-red-600:    #dc2626;

  /* Cores por módulo (cards da tela inicial — referência da cliente) */
  --mod-blue:   #2e7df6;   /* Clientes */
  --mod-green:  #16a34a;   /* Produtos */
  --mod-purple: #7c3aed;   /* Vendas */
  --mod-orange: #f97316;   /* Recebimentos */
  --mod-teal:   #1597ae;   /* Relatórios */
  --mod-pink:   #db2777;   /* Comprovantes */
  --ink:        #14274a;   /* navy dos títulos/menu */

  /* ════════ SEMÂNTICA (usar sempre estas) ════════ */
  --bg:             var(--neutral-0);
  --bg-subtle:      #eef1f8;
  --bg-muted:       var(--neutral-100);
  --bg-inverted:    var(--neutral-900);

  --text:           #0f172a;
  --text-secondary: var(--neutral-600);
  --text-muted:     #64748b;
  --text-subtle:    var(--neutral-400);
  --text-inverted:  var(--neutral-0);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-100);

  --primary:        var(--brand-green-500);
  --primary-hover:  var(--brand-green-600);
  --primary-text:   var(--neutral-0);

  --secondary:      var(--brand-blue-500);
  --accent:         var(--brand-orange-500);

  --success:        var(--brand-green-500);
  --success-bg:     var(--brand-green-50);
  --success-border: var(--brand-green-100);

  --info:           var(--brand-blue-500);
  --info-bg:        var(--brand-blue-50);
  --info-border:    #dbeafe;

  --warning:        var(--brand-amber-500);
  --warning-bg:     var(--brand-amber-50);
  --warning-border: #fef3c7;

  --danger:         var(--brand-red-600);
  --danger-bg:      var(--brand-red-50);
  --danger-border:  var(--brand-red-100);

  /* ════════ ESPAÇAMENTOS ════════ */
  --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;

  /* ════════ RADIUS ════════ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ════════ SHADOWS ════════ */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12);
  --shadow-2xl: 0 24px 64px rgba(0,0,0,0.18);

  /* ════════ TRANSIÇÕES ════════ */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 400ms;

  /* ════════ SAFE AREA (iPhone) ════════ */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ════════ Z-INDEX ════════ */
  --z-dropdown: 100;
  --z-modal:    500;
  --z-tooltip:  1000;
  --z-toast:    2000;
}