/* ==========================================================================
   Trucksy — Design System (BASE)
   Apenas tokens (CSS Custom Properties) + reset. Nenhum componente aqui.
   Carregar ANTES de components.css. Dark mode via [data-theme="dark"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1 — Tokens de cor
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-50: #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;   /* COR PRINCIPAL */
  --brand-600: #4F46E5;   /* hover */
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;

  /* Neutros (Zinc) */
  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;
  --gray-950: #09090B;

  /* Semânticas */
  --color-success: #22C55E;
  --color-success-bg: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-success-text: #15803D;

  --color-warning: #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-warning-text: #B45309;

  --color-error: #EF4444;
  --color-error-bg: #FEF2F2;
  --color-error-border: #FECACA;
  --color-error-text: #B91C1C;

  --color-info: #3B82F6;
  --color-info-bg: #EFF6FF;
  --color-info-border: #BFDBFE;
  --color-info-text: #1D4ED8;

  /* Especiais do produto */
  --whatsapp: #25D366;
  --whatsapp-dark: #128C7E;
  --whatsapp-bg: #F0FDF4;
  --ai-purple: #8B5CF6;
  --ai-cyan: #06B6D4;
  --ai-bg: #F5F3FF;

  /* Aliases semânticos (usados no layout) */
  --bg-page: var(--gray-50);
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-header: #FFFFFF;
  --border-default: var(--gray-200);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  /* paridade com o dark: mesmos nomes de token nos dois temas */
  --bg-elevated: #FFFFFF;
  --bg-subtle: var(--gray-50);
  --bg-overlay: rgba(9, 9, 11, .5);
  --border-strong: var(--gray-300);
  --border-subtle: var(--gray-100);
  --brand-text: var(--brand-600);
  --brand-subtle: var(--brand-50);
  --focus-ring: 0 0 0 3px rgba(0, 91, 192, .18);
  --price-color: var(--brand-600);   /* valores monetários */
  --brand-hover: var(--brand-600);   /* fundo do primário em hover */
  --text-tertiary: var(--gray-400);
  --text-inverse: #FFFFFF;
}

/* Dark Mode */
/* Dark mode com linguagem própria (não é o claro invertido).
   Escala de superfícies: page < card < elevated (modais/dropdowns) < overlay.
   A marca é separada em USO DE FUNDO (--brand-500, com texto branco por cima) e
   USO DE TEXTO (--brand-text, mais claro, para links/valores sobre fundo escuro). */
[data-theme="dark"] {
  /* superfícies — escuro profundo, nunca preto absoluto */
  --bg-page: #0B0F16;
  --bg-card: #121824;
  --bg-elevated: #182031;          /* modais, dropdowns, popovers */
  --bg-subtle: #0F1520;            /* faixas/cabeçalhos de tabela */
  --bg-sidebar: #0E1420;
  --bg-header: #101724;
  --bg-overlay: rgba(6, 9, 15, .62);

  /* bordas e divisores — discretos, mas visíveis */
  --border-default: #232C3C;
  --border-strong: #33405A;
  --border-subtle: #1A2230;

  /* texto */
  --text-primary: #E9EEF6;         /* quase branco: menos fadiga que #FFF puro */
  --text-secondary: #A3AEC0;
  --text-tertiary: #7B8699;
  --text-inverse: #0B0F16;

  /* marca: fundo x texto (contraste adequado em cada uso) */
  --brand-500: #1E72D0;            /* fundo do botão primário (texto branco por cima) */
  --brand-600: #7FB8F7;            /* TEXTO/links da marca sobre fundo escuro */
  --brand-700: #A9D0FA;            /* texto da marca em ênfase */
  --brand-hover: #2A80DC;          /* hover do primário (fundo, não texto) */
  --brand-text: #7FB8F7;           /* links e destaques sobre fundo escuro */
  --brand-subtle: #14243A;         /* fundo de item selecionado/chip ativo */

  /* status — dessaturados para o escuro, com par bg/border/text legível */
  --color-success: #35B87C;  --color-success-bg: #0F2A1E; --color-success-border: #1C4433; --color-success-text: #6FDCA8;
  --color-warning: #D08A2C;  --color-warning-bg: #2B1F0C; --color-warning-border: #4A3616; --color-warning-text: #E9B564;
  --color-error:   #DC5A55;  --color-error-bg:   #2C1414; --color-error-border:   #4A2220; --color-error-text:   #F09A96;
  --color-info:    #3E8FDC;  --color-info-bg:    #10202F; --color-info-border:    #1E3550;  --color-info-text:    #8CC2F2;

  /* sombras: no escuro a profundidade vem de sombra densa, não de sombra clara */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.5);
  --shadow-md: 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  --shadow-xl: 0 24px 48px rgba(0,0,0,.66);

  /* foco visível nos dois temas */
  --focus-ring: 0 0 0 3px rgba(126, 184, 247, .32);
  --price-color: var(--text-primary); /* no escuro o valor pesa por peso/tamanho, não por cor */
}

/* --------------------------------------------------------------------------
   1.2 — Tokens de espaçamento
   -------------------------------------------------------------------------- */
:root {
  --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;
}

/* --------------------------------------------------------------------------
   1.3 — Tokens de tipografia
   -------------------------------------------------------------------------- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
}

/* --------------------------------------------------------------------------
   1.4 — Tokens de borda e sombra
   -------------------------------------------------------------------------- */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

/* --------------------------------------------------------------------------
   1.5 — Tokens de transição
   -------------------------------------------------------------------------- */
:root {
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1.6 — Reset CSS moderno
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-page);
  line-height: var(--leading-normal);
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
img, svg { display: block; }
table { border-collapse: collapse; width: 100%; }