/* ============================================================================= * Design Tokens — Questionário de Lipedema (lipedema.life) * * Fonte única de verdade para cores, tipografia, espaçamento, raios e sombras. * Todos os demais CSS do projeto consomem estas variáveis. * * Dark mode: os componentes leem os tokens semânticos (--color-surface, * --color-text, etc.). Basta definir [data-theme="dark"] no ou * para trocar a paleta sem tocar em nenhum componente. * ========================================================================== */ :root { /* --- Marca (teal clínico — confiança médica) --- */ --color-primary: #0d9488; --color-primary-hover: #0f766e; --color-primary-active: #115e59; --color-primary-soft: #ccfbf1; /* fundos suaves / seleção */ --color-primary-border: #5eead4; /* foco / bordas ativas */ --color-on-primary: #ffffff; /* --- Neutros --- */ --color-surface: #ffffff; --color-surface-alt: #f8fafc; /* fundos internos (caixas, hover) */ --color-page: #eef4f4; /* fundo da página */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --color-text: #1e293b; --color-text-muted: #475569; --color-text-subtle: #64748b; /* --- Semânticas --- */ --color-success-bg: #d1fae5; --color-success-text: #065f46; --color-success-border: #a7f3d0; --color-error-bg: #fee2e2; --color-error-text: #991b1b; --color-error-border: #fecaca; --color-warning-bg: #fef3c7; --color-warning-text: #92400e; --color-warning-border: #fde68a; --color-info-bg: #e0f2fe; --color-info-text: #075985; --color-info-border: #bae6fd; /* --- Tipografia --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; /* --- Espaçamento (escala 4px) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* --- Raios --- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* --- Sombras --- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14); --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.25); /* --- Transições --- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; } /* --- Dark mode (usado pelo admin; basta data-theme="dark") --- */ [data-theme="dark"] { --color-surface: #1e293b; --color-surface-alt: #0f172a; --color-page: #0b1220; --color-border: #334155; --color-border-strong: #475569; --color-text: #e2e8f0; --color-text-muted: #cbd5e1; --color-text-subtle: #94a3b8; --color-primary-soft: #134e4a; --color-success-bg: #064e3b; --color-success-text: #a7f3d0; --color-success-border: #065f46; --color-error-bg: #7f1d1d; --color-error-text: #fecaca; --color-error-border: #991b1b; --color-warning-bg: #78350f; --color-warning-text: #fde68a; --color-warning-border: #92400e; --color-info-bg: #0c4a6e; --color-info-text: #bae6fd; --color-info-border: #075985; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); }