/* =====================================================
   CabralCare — Design Tokens
   Responsabilidade: definir TODAS as variáveis CSS.
   Nenhum estilo de componente deve estar aqui.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* — Brand / Primary (#0d2d6d) — */
    --color-primary: #0d2d6d;
    --color-primary-hover: #0a2152;
    --color-primary-active: #061638;
    --color-primary-subtle: #f0f3f8; /* Soft background */
    --color-primary-soft: #d3dceb;
    --color-primary-rgb: 13, 45, 109;

    /* — Sidebar specific — */
    --color-sidebar-toggle-icon: #69fefe;  /* CSS-02: cor do ícone do botão toggle da sidebar */
    --color-sidebar-overlay: rgba(255, 255, 255, 0.1); /* CSS-03: overlay branco semitransparente */
    --color-backdrop: rgba(15, 23, 42, 0.4);            /* CSS-03: backdrop escuro semitransparente */

    /* — Brand / Secondary (Accent) (#97d4c9) — */
    --color-secondary: #97d4c9;
    --color-secondary-hover: #7ebfb4;
    --color-secondary-subtle: #f2fbf9;
    --color-accent: var(--color-primary);
    --color-accent-subtle: #f0f3f8;

    /* — Semantic Colors (Clínico e Suave) — */
    --color-success: #10b981; 
    --color-success-subtle: #ecfdf5; 
    --color-danger: #ef4444; 
    --color-danger-subtle: #fef2f2; 
    --color-warning: #f59e0b; 
    --color-warning-subtle: #fffbeb; 
    --color-info: #3b82f6; 
    --color-info-subtle: #eff6ff; 

    /* — Surfaces — */
    --color-bg: #e2e8f0; /* Fundo global mais escuro (Slate 200) para contraste flat */
    --color-surface: #ffffff; /* Fundo de cards puro */
    --color-surface-hover: #f8fafc;
    --color-surface-elevated: #ffffff;

    /* — Text — */
    --color-text: #1e293b; /* Slate 800 - Ótimo contraste */
    --color-text-secondary: #475569; /* Slate 600 - Rótulos */
    --color-text-tertiary: #94a3b8; /* Slate 400 */
    --color-text-inverse: #ffffff;
    --color-on-primary: #ffffff;
    --color-on-secondary: #0d2d6d;

    /* — Borders — */
    --color-border: #e2e8f0; /* Divisões suaves */
    --color-border-strong: #cbd5e1; /* Inputs */
    --color-border-subtle: #f1f5f9;
    --color-divider: #f1f5f9;

    /* — Shadows (Minimalista - Flat Design) — */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-primary: none;

    /* — Radii (Bordas arredondadas) — */
    --radius-base: 0.75rem; /* 12px - Valor único para todo o projeto */
    --radius-sm: var(--radius-base);
    --radius-md: var(--radius-base);
    --radius-lg: var(--radius-base);
    --radius-xl: var(--radius-base);
    --radius-2xl: var(--radius-base);
    --radius-full: 9999px;

    /* — Transitions — */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* — Layout — */
    --sidebar-width: 72px;
    --sidebar-width-expanded: 260px;
    --navbar-height: 64px;

    /* — Typography — */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-heading: var(--font-family);
    --font-family-body: var(--font-family);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.875rem;

    /* — Bootstrap overrides — */
    --bs-body-font-family: var(--font-family);
    --bs-body-font-size: var(--font-size-base); /* Tamanho padrão mais legível */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-primary-bg-subtle: var(--color-primary-subtle);
    --bs-success: var(--color-success);
    --bs-danger: var(--color-danger);
    --bs-warning: var(--color-warning);
    --bs-info: var(--color-info);
}