/**
 * Design tokens do sistema BracoGrupo
 * Baseado no sistema Lima + Floresta do Gestor Pessoal
 * Paleta: acento verde-lima (C6F542), verde floresta profundo (0F2A1F)
 */

:root {
  /* Cores principais */
  --lime: #C6F542;
  --lime-dark: #B2E32F;
  --forest: #0F2A1F;
  --forest-ink: #1B4D37;

  /* Modo Light */
  --color-bg: #F3F5F1;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F6F8F3;
  --color-surface-hover: #EEF2EA;
  --color-sidebar: #FFFFFF;
  --color-border: #E2E8DE;
  --color-border-strong: #C5D0C0;

  --color-text: #121A15;
  --color-text-secondary: #546258;
  --color-text-muted: #6C7A70;

  --color-primary: var(--lime);
  --color-primary-dark: var(--lime-dark);
  --color-primary-tint: #EEFBD0;
  --color-primary-ring: rgba(27, 77, 55, 0.28);
  --color-on-primary: var(--forest);
  --color-ink: var(--forest-ink);

  --color-nav-active-bg: rgba(27, 77, 55, 0.08);
  --color-nav-active-fg: var(--forest-ink);

  /* Semânticas */
  --color-success: #2E9E5B;
  --color-success-light: #E1F5E8;
  --color-success-fg: #1E7A47;

  --color-error: #D9483B;
  --color-error-light: #FDECEA;
  --color-error-fg: #B8382C;

  /* Gráficos */
  --color-chart-accent: var(--forest-ink);
  --color-chart-emphasis: var(--forest);
  --color-chart-muted: var(--lime);
  --color-chart-grid: #ECF0E9;
  --color-chart-wash: rgba(27, 77, 55, 0.10);
  --color-chart-track: #E3EDE6;

  /* Sombras */
  --shadow-sm: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
  --shadow-md: 0 0 2px 0 rgba(145, 158, 171, 0.24), -20px 20px 40px -4px rgba(145, 158, 171, 0.24);
  --shadow-lg: -40px 40px 80px -8px rgba(0, 0, 0, 0.24);

  /* Raios (Minimal base 8) */
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Tipografia */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0A1610;
    --color-surface: #10201A;
    --color-surface-alt: #152820;
    --color-surface-hover: #1B3128;
    --color-sidebar: #0D1B14;
    --color-border: #21362B;
    --color-border-strong: #335042;

    --color-text: #EEF4EF;
    --color-text-secondary: #A9B9AF;
    --color-text-muted: #7E9086;

    --color-primary-tint: rgba(198, 245, 66, 0.14);
    --color-primary-ring: rgba(198, 245, 66, 0.35);
    --color-on-primary: #0A1610;
    --color-ink: var(--lime);

    --color-nav-active-bg: rgba(198, 245, 66, 0.12);
    --color-nav-active-fg: var(--lime);

    /* Semânticas dark */
    --color-success: #4FCF85;
    --color-success-light: rgba(63, 207, 127, 0.16);
    --color-success-fg: #7FE0A5;

    --color-error: #FF6B61;
    --color-error-light: rgba(255, 107, 97, 0.16);
    --color-error-fg: #FF8A82;

    /* Gráficos dark */
    --color-chart-accent: var(--lime);
    --color-chart-emphasis: var(--lime);
    --color-chart-muted: #2E4A3B;
    --color-chart-grid: #1C2F25;
    --color-chart-wash: rgba(198, 245, 66, 0.10);
    --color-chart-track: #1F3529;

    --shadow-sm: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 12px 24px -4px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 0 2px 0 rgba(0, 0, 0, 0.24), -20px 20px 40px -4px rgba(0, 0, 0, 0.24);
    --shadow-lg: -40px 40px 80px -8px rgba(0, 0, 0, 0.24);
  }
}

/* Explicit dark theme */
:root[data-theme="dark"] {
  --color-bg: #0A1610;
  --color-surface: #10201A;
  --color-surface-alt: #152820;
  --color-surface-hover: #1B3128;
  --color-sidebar: #0D1B14;
  --color-border: #21362B;
  --color-border-strong: #335042;

  --color-text: #EEF4EF;
  --color-text-secondary: #A9B9AF;
  --color-text-muted: #7E9086;

  --color-primary-tint: rgba(198, 245, 66, 0.14);
  --color-primary-ring: rgba(198, 245, 66, 0.35);
  --color-on-primary: #0A1610;
  --color-ink: var(--lime);

  --color-nav-active-bg: rgba(198, 245, 66, 0.12);
  --color-nav-active-fg: var(--lime);

  --color-success: #4FCF85;
  --color-success-light: rgba(63, 207, 127, 0.16);
  --color-success-fg: #7FE0A5;

  --color-error: #FF6B61;
  --color-error-light: rgba(255, 107, 97, 0.16);
  --color-error-fg: #FF8A82;

  --color-chart-accent: var(--lime);
  --color-chart-emphasis: var(--lime);
  --color-chart-muted: #2E4A3B;
  --color-chart-grid: #1C2F25;
  --color-chart-wash: rgba(198, 245, 66, 0.10);
  --color-chart-track: #1F3529;

  --shadow-sm: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 12px 24px -4px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 0 2px 0 rgba(0, 0, 0, 0.24), -20px 20px 40px -4px rgba(0, 0, 0, 0.24);
  --shadow-lg: -40px 40px 80px -8px rgba(0, 0, 0, 0.24);
}

/* Explicit light theme */
:root[data-theme="light"] {
  --color-bg: #F3F5F1;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F6F8F3;
  --color-surface-hover: #EEF2EA;
  --color-sidebar: #FFFFFF;
  --color-border: #E2E8DE;
  --color-border-strong: #C5D0C0;

  --color-text: #121A15;
  --color-text-secondary: #546258;
  --color-text-muted: #6C7A70;

  --color-primary-tint: #EEFBD0;
  --color-primary-ring: rgba(27, 77, 55, 0.28);
  --color-on-primary: var(--forest);
  --color-ink: var(--forest-ink);

  --color-nav-active-bg: rgba(27, 77, 55, 0.08);
  --color-nav-active-fg: var(--forest-ink);

  --color-success: #2E9E5B;
  --color-success-light: #E1F5E8;
  --color-success-fg: #1E7A47;

  --color-error: #D9483B;
  --color-error-light: #FDECEA;
  --color-error-fg: #B8382C;

  --color-chart-accent: var(--forest-ink);
  --color-chart-emphasis: var(--forest);
  --color-chart-muted: var(--lime);
  --color-chart-grid: #ECF0E9;
  --color-chart-wash: rgba(27, 77, 55, 0.10);
  --color-chart-track: #E3EDE6;

  --shadow-sm: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
  --shadow-md: 0 0 2px 0 rgba(145, 158, 171, 0.24), -20px 20px 40px -4px rgba(145, 158, 171, 0.24);
  --shadow-lg: -40px 40px 80px -8px rgba(0, 0, 0, 0.24);
}

/* Global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s, color 0.2s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-secondary);
}

/* Respects prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}