/* GERADO por gerar_tokens.py a partir de tokens.json. Não edite à mão. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* Escuro é o padrão (área de membros e app). Backoffice usa data-theme="light" no <html>. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --vle-bg: #051924;
  --vle-surface: #0A2330;
  --vle-surface2: #113040;
  --vle-border: #1E4254;
  --vle-text: #F2F5F4;
  --vle-text-muted: #A3B4BC;
  --vle-primary: #3EC44B;
  --vle-on-primary: #051924;
  --vle-primary-text: #3EC44B;
  --vle-action: #278130;
  --vle-action-hover: #23712A;
  --vle-on-action: #FFFFFF;
  --vle-accent: #43B374;
  --vle-success: #3EC44B;
  --vle-warning: #F2B84B;
  --vle-error: #FF6B6B;
  --vle-on-error: #051924;
  --vle-shadow-sm: none;
  --vle-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --vle-shadow-focus: 0 0 0 3px rgba(62, 196, 75, 0.45);
  --vle-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --vle-font-sans: 'DM Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --vle-space-1: 4px;
  --vle-space-2: 8px;
  --vle-space-3: 12px;
  --vle-space-4: 16px;
  --vle-space-5: 24px;
  --vle-space-6: 32px;
  --vle-space-7: 48px;
  --vle-space-8: 64px;
  --vle-radius-sm: 6px;
  --vle-radius-md: 10px;
  --vle-radius-lg: 16px;
  --vle-radius-pill: 999px;
  --vle-content-max: 1200px;
  --vle-reading-max: 720px;
  --vle-sidebar: 264px;
  --vle-touch-min: 44px;
  --vle-text-display-lg: 600 48px/1.05 var(--vle-font-display);
  --vle-text-display-lg-tracking: -0.01em;
  --vle-text-display-md: 600 36px/1.1 var(--vle-font-display);
  --vle-text-display-md-tracking: -0.01em;
  --vle-text-display-sm: 600 28px/1.15 var(--vle-font-display);
  --vle-text-display-sm-tracking: 0em;
  --vle-text-title-lg: 600 20px/1.3 var(--vle-font-sans);
  --vle-text-title-lg-tracking: 0em;
  --vle-text-title-md: 600 17px/1.35 var(--vle-font-sans);
  --vle-text-title-md-tracking: 0em;
  --vle-text-body-lg: 400 17px/1.6 var(--vle-font-sans);
  --vle-text-body-lg-tracking: 0em;
  --vle-text-body: 400 15px/1.55 var(--vle-font-sans);
  --vle-text-body-tracking: 0em;
  --vle-text-body-sm: 400 13px/1.5 var(--vle-font-sans);
  --vle-text-body-sm-tracking: 0em;
  --vle-text-label: 600 14px/1.2 var(--vle-font-sans);
  --vle-text-label-tracking: 0.01em;
  --vle-text-eyebrow: 600 12px/1.2 var(--vle-font-sans);
  --vle-text-eyebrow-tracking: 0.14em;
}

[data-theme="light"] {
  color-scheme: light;
  --vle-bg: #F4F7F6;
  --vle-surface: #FFFFFF;
  --vle-surface2: #EAF0EE;
  --vle-border: #D3DDDA;
  --vle-text: #0B1F2A;
  --vle-text-muted: #4A5B63;
  --vle-primary: #3EC44B;
  --vle-on-primary: #051924;
  --vle-primary-text: #17772A;
  --vle-action: #278130;
  --vle-action-hover: #23712A;
  --vle-on-action: #FFFFFF;
  --vle-accent: #17774A;
  --vle-success: #17772A;
  --vle-warning: #8A5A00;
  --vle-error: #C62828;
  --vle-on-error: #FFFFFF;
  --vle-shadow-sm: 0 1px 2px rgba(11, 31, 42, 0.06);
  --vle-shadow-md: 0 6px 20px rgba(11, 31, 42, 0.08);
}

/* Tailwind v4 (api/resources/css/app.css): utilitários a partir das variáveis acima. */
@theme inline {
  --color-bg: var(--vle-bg);
  --color-surface: var(--vle-surface);
  --color-surface2: var(--vle-surface2);
  --color-border: var(--vle-border);
  --color-text: var(--vle-text);
  --color-text-muted: var(--vle-text-muted);
  --color-primary: var(--vle-primary);
  --color-on-primary: var(--vle-on-primary);
  --color-primary-text: var(--vle-primary-text);
  --color-action: var(--vle-action);
  --color-action-hover: var(--vle-action-hover);
  --color-on-action: var(--vle-on-action);
  --color-accent: var(--vle-accent);
  --color-success: var(--vle-success);
  --color-warning: var(--vle-warning);
  --color-error: var(--vle-error);
  --color-on-error: var(--vle-on-error);
  --font-display: var(--vle-font-display);
  --font-sans: var(--vle-font-sans);
  --radius-sm: var(--vle-radius-sm);
  --radius-md: var(--vle-radius-md);
  --radius-lg: var(--vle-radius-lg);
  --radius-pill: var(--vle-radius-pill);
}