/* ============================================================================ RESIDENCIAL LAR DOCE LAR — DESIGN TOKENS Single Source of Truth · Contrato Design ↔ Engenharia ---------------------------------------------------------------------------- Toda decisão visual do sistema nasce aqui. Zero valores hardcoded na UI: componentes consomem SEMPRE var(--token), nunca o hex literal. Filosofia: a LOGO é a alma (calor, afeto, artesanal) — o SISTEMA é o corpo (clareza, eficiência, Apple-like). Light-first. WCAG AA garantido. Accent de marca: SAGE / EUCALIPTO — verde dessaturado e terroso. Saúde e vida sem o frio clínico de hospital; sereno e maduro para as usuárias; ecoa a grama e as flores da base da logo; harmoniza com o greige. Convenção de camadas: 1. PRIMITIVES → valores crus (escalas de cor, raios, tempos). Não usar direto na UI. 2. SEMANTIC → significado (bg, surface, text, accent, success...). USAR estes. 3. COMPONENT → ajustes pontuais por componente quando necessário. ============================================================================ */ /* =========================================================================== 1. PRIMITIVES — escalas cruas (não referenciar direto em componentes) =========================================================================== */ :root { /* — Neutros GREIGE (derivados do fundo #EBEBEB da logo: quente, levemente esverdeado-acinzentado, NUNCA cinza azulado frio) — */ --greige-0: #FFFFFF; --greige-25: #FBFAF8; --greige-50: #F7F5F2; --greige-100: #F4F2EF; --greige-150: #ECE9E4; --greige-200: #E6E2DC; --greige-300: #D8D3CA; --greige-400: #BCB6AB; --greige-500: #9A958C; --greige-600: #7C766C; --greige-700: #5C574F; --greige-800: #3A3733; --greige-850: #2A2826; --greige-900: #211F1D; --greige-950: #191817; /* — SAGE / EUCALIPTO (accent de marca) — */ --sage-50: #EDF3F0; --sage-100: #DCE9E3; --sage-200: #BCD3C8; --sage-300: #97BBAA; --sage-400: #6E9C8A; --sage-500: #5E8C7B; /* accent canônico de marca (decorativo / ícones / borda) */ --sage-600: #4A7363; /* accent forte — fundo de botão c/ texto branco (AA 5.35) */ --sage-700: #3C5C50; --sage-800: #2E463D; --sage-900: #21332C; /* — Verde SUCCESS (pago / positivo). Distinto do sage de marca: mais vivo — */ --green-50: #EAF2EC; --green-100: #D5E7DA; --green-500: #4F8C63; --green-600: #3E6B4E; --green-700: #2F5A40; --green-d-300: #7FB892; --green-d-400: #5FA277; /* — Vermelho DANGER (atrasado / negativo / exclusão) — terracota, não vermelho berrante — */ --red-50: #FBEAE8; --red-100: #F6D6D2; --red-500: #C0473D; --red-600: #A33A32; --red-700: #87302A; --red-d-300: #E08B83; --red-d-400: #D2746B; /* — Âmbar WARNING (pendente / vence em breve) — */ --amber-50: #FDF2E2; --amber-100: #FAE5C7; --amber-500: #C68A36; --amber-600: #8A5A1E; --amber-700: #6E4716; --amber-d-300: #D9A85C; --amber-d-400: #C9963F; /* — Azul INFO (neutro / consolidado / informativo) — petróleo suave, não azul-tech — */ --blue-50: #E7F1F4; --blue-100: #D0E4EA; --blue-500: #3F7E94; --blue-600: #2F6276; --blue-700: #264F60; --blue-d-300: #6FB0C4; --blue-d-400: #4F94AB; /* — Série de DATA VIZ (gráficos) — sage como protagonista + apoios harmônicos — */ --viz-1: #5E8C7B; /* sage — série primária */ --viz-2: #C68A36; /* âmbar — série 2 */ --viz-3: #3F7E94; /* petróleo— série 3 */ --viz-4: #B07C9E; /* malva — série 4 */ --viz-5: #C0473D; /* terra — série 5 / alerta */ --viz-6: #8A9A5B; /* oliva — série 6 */ /* =========================================================================== PRIMITIVES não-cromáticos =========================================================================== */ /* — Tipografia: famílias — */ --font-brand: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-num: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* + tabular-nums */ --font-mono: "SFMono-Regular", "JetBrains Mono", "Roboto Mono", ui-monospace, monospace; /* — Tipografia: escala (base 16px · ~1.20 minor-third para densidade de dashboard) — */ --text-2xs: 0.6875rem; /* 11px — micro-labels, badges densos */ --text-xs: 0.75rem; /* 12px — labels, captions */ --text-sm: 0.8125rem; /* 13px — texto de tabela, metadados */ --text-base: 0.9375rem; /* 15px — corpo padrão da UI */ --text-md: 1rem; /* 16px — corpo confortável / inputs */ --text-lg: 1.1875rem; /* 19px — subtítulos */ --text-xl: 1.4375rem; /* 23px — títulos de seção */ --text-2xl: 1.75rem; /* 28px — títulos de página */ --text-3xl: 2.25rem; /* 36px — KPI grande */ --text-4xl: 3rem; /* 48px — display / login */ --text-5xl: 4rem; /* 64px — hero de marca */ /* — Tipografia: pesos — */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* — Tipografia: line-height — */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* — Tipografia: tracking — */ --tracking-tighter: -0.02em; --tracking-tight: -0.011em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-label: 0.06em; /* — Espaçamento (escala 4px · usar para padding, margin, gap) — */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* — Border-radius (variados por intenção — não tudo 16px uniforme) — */ --radius-xs: 4px; /* badges, tags */ --radius-sm: 8px; /* inputs, botões pequenos */ --radius-md: 12px; /* botões, campos */ --radius-lg: 16px; /* cards */ --radius-xl: 22px; /* containers grandes, modais */ --radius-2xl: 28px; /* hero / login card */ --radius-full: 999px; /* pills, toggles, avatar */ /* — Larguras de borda — */ --border-thin: 1px; --border-medium: 1.5px; --border-thick: 2px; /* — Camadas Z — */ --z-base: 0; --z-sticky: 100; /* topbar, cabeçalho de tabela */ --z-sidebar: 200; --z-dropdown: 300; --z-overlay: 400; /* backdrop de modal */ --z-modal: 410; --z-toast: 500; /* — Motion (Apple-like: rápido, com ease suave, nunca bouncy) — */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* desaceleração natural */ --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1); --ease-spring:cubic-bezier(0.34, 1.3, 0.64, 1); /* leve overshoot p/ toggles */ --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* — Layout — */ --sidebar-width: 264px; --sidebar-width-icon: 76px; --topbar-height: 68px; --content-max: 1280px; --tap-target-min: 48px; /* acessibilidade idosos: alvo de toque mínimo */ } /* =========================================================================== 2. SEMANTIC — LIGHT MODE (padrão). USAR ESTES TOKENS NA UI. =========================================================================== */ :root, [data-theme="light"] { color-scheme: light; /* — Superfícies / fundos — */ --bg-app: var(--greige-100); /* fundo geral do app */ --bg-subtle: var(--greige-50); /* zonas levemente recuadas */ --surface: var(--greige-0); /* cards, painéis, tabelas */ --surface-raised: var(--greige-0); /* elementos elevados (dropdown, modal) */ --surface-sunken: var(--greige-50); /* inputs, áreas de input, zebra */ --surface-hover: var(--greige-100); /* hover de linha / item */ /* — Bordas / divisores — */ --border: var(--greige-200); /* borda padrão de card/input */ --border-strong: var(--greige-300); /* borda em foco neutro / divisor forte */ --border-subtle: var(--greige-150); /* divisor sutil interno */ /* — Texto — */ --text-primary: var(--greige-850); /* títulos, números, conteúdo crítico (AA 14.7) */ --text-secondary: var(--greige-700); /* labels, descrições (AA 5.55) */ --text-tertiary: var(--greige-600); /* metadados auxiliares (AA 4.4) */ --text-disabled: var(--greige-400); --text-on-accent: #FFFFFF; /* texto sobre fundo accent/ações */ --text-on-dark: var(--greige-25); /* — Accent de marca (SAGE) — */ --accent: var(--sage-500); /* marca: ícones, bordas ativas, detalhes */ --accent-strong: var(--sage-600); /* AÇÕES: fundo de botão primário + texto branco */ --accent-hover: var(--sage-700); --accent-soft: var(--sage-100); /* fundo de chip/seleção suave */ --accent-softer: var(--sage-50); --accent-text: var(--sage-600); /* accent como texto sobre claro (AA 5.35) */ --accent-contrast: #FFFFFF; /* — Semânticas: SUCCESS (pago / positivo) — */ --success: var(--green-500); --success-text: var(--green-600); --success-bg: var(--green-50); --success-border: var(--green-100); /* — Semânticas: WARNING (pendente / vence em breve) — */ --warning: var(--amber-500); --warning-text: var(--amber-600); --warning-bg: var(--amber-50); --warning-border: var(--amber-100); /* — Semânticas: DANGER (atrasado / negativo / exclusão) — */ --danger: var(--red-500); --danger-strong: var(--red-600); /* fundo botão danger + texto branco (AA 4.99) */ --danger-text: var(--red-600); --danger-bg: var(--red-50); --danger-border: var(--red-100); --danger-hover: var(--red-700); /* — Semânticas: INFO (consolidado / informativo) — */ --info: var(--blue-500); --info-text: var(--blue-600); --info-bg: var(--blue-50); --info-border: var(--blue-100); /* — Foco (WCAG 2.4.7 / 1.4.11 — anel visível 3:1) — */ --focus-ring: var(--sage-500); --focus-ring-offset: var(--surface); /* — Sombras Apple-like: suaves, em CAMADAS, tom quente (greige), nunca pretas duras — */ --shadow-xs: 0 1px 2px rgba(42, 40, 38, 0.05); --shadow-sm: 0 1px 2px rgba(42, 40, 38, 0.04), 0 2px 6px rgba(42, 40, 38, 0.05); --shadow-md: 0 2px 4px rgba(42, 40, 38, 0.04), 0 6px 16px rgba(42, 40, 38, 0.07); --shadow-lg: 0 4px 8px rgba(42, 40, 38, 0.05), 0 16px 32px rgba(42, 40, 38, 0.10); --shadow-xl: 0 8px 16px rgba(42, 40, 38, 0.06), 0 28px 56px rgba(42, 40, 38, 0.14); --shadow-accent: 0 6px 20px rgba(74, 115, 99, 0.28); /* glow comedido em ação primária */ /* — Glassmorphism comedido (topbar / overlays) — */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(42, 40, 38, 0.06); --glass-blur: 18px; /* — Data viz: grid e tooltip — */ --viz-grid: var(--greige-200); --viz-axis: var(--greige-500); --viz-tooltip-bg: var(--greige-850); --viz-tooltip-text: var(--greige-25); } /* =========================================================================== 2b. SEMANTIC — DARK MODE =========================================================================== */ [data-theme="dark"] { color-scheme: dark; --bg-app: var(--greige-950); --bg-subtle: #151413; --surface: #222120; --surface-raised: #2B2A28; --surface-sunken: #1C1B1A; --surface-hover: #2B2A28; --border: #34322F; --border-strong: #423F3B; --border-subtle: #2A2826; --text-primary: #ECE9E4; /* AA 13.3 sobre surface */ --text-secondary: #ABA69D; /* AA 6.64 */ --text-tertiary: #888379; /* AA ~4.6 */ --text-disabled: #5C574F; --text-on-accent: #14201B; --text-on-dark: #ECE9E4; --accent: var(--sage-300); --accent-strong: var(--sage-400); /* fundo botão + texto escuro (AA 5.73) */ --accent-hover: var(--sage-300); --accent-soft: rgba(94, 140, 123, 0.16); --accent-softer: rgba(94, 140, 123, 0.10); --accent-text: var(--sage-300); /* AA 7.4 */ --accent-contrast: #14201B; --success: var(--green-d-400); --success-text: var(--green-d-300); --success-bg: rgba(79, 140, 99, 0.16); --success-border: rgba(79, 140, 99, 0.30); --warning: var(--amber-d-400); --warning-text: var(--amber-d-300); --warning-bg: rgba(198, 138, 54, 0.15); --warning-border: rgba(198, 138, 54, 0.30); --danger: var(--red-d-400); --danger-strong: var(--red-d-400); --danger-text: var(--red-d-300); --danger-bg: rgba(192, 71, 61, 0.16); --danger-border: rgba(192, 71, 61, 0.32); --danger-hover: var(--red-d-300); --info: var(--blue-d-400); --info-text: var(--blue-d-300); --info-bg: rgba(63, 126, 148, 0.16); --info-border: rgba(63, 126, 148, 0.30); --focus-ring: var(--sage-300); --focus-ring-offset: var(--surface); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.34); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.32), 0 6px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.34), 0 16px 32px rgba(0, 0, 0, 0.48); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.40), 0 28px 56px rgba(0, 0, 0, 0.56); --shadow-accent: 0 6px 24px rgba(94, 140, 123, 0.40); --glass-bg: rgba(34, 33, 32, 0.72); --glass-border: rgba(255, 255, 255, 0.06); --glass-blur: 18px; --viz-grid: #34322F; --viz-axis: #6F6B63; --viz-tooltip-bg: #ECE9E4; --viz-tooltip-text: #211F1D; /* série viz levemente clareada p/ contraste no escuro */ --viz-1: #8FB9A8; --viz-2: #D9A85C; --viz-3: #6FB0C4; --viz-4: #C79CB6; --viz-5: #E08B83; --viz-6: #A9B87A; } /* =========================================================================== Acessibilidade global: respeitar redução de movimento =========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }