/* ============================================================ Design Tokens — Elyza Cardoso Fotografias ------------------------------------------------------------ Fonte única de verdade para cor, tipografia, spacing, raios, sombras, motion, z-index e layout. Sempre prefira var(--token) em vez de valor literal. Convenções de nome: --color-* palette + roles semânticos --font-* famílias tipográficas --text-* escala de font-size --leading-* line-height --tracking-* letter-spacing --space-* escala de spacing (4pt grid) --radius-* escala de border-radius --shadow-* escala de elevação --ease-* timing functions --duration-* durações de animação --z-* camadas de z-index --layout-* larguras de container ============================================================ */ :root { /* ============ Paleta oficial da marca ============ Somente estas 8 cores (+ branco + danger) são permitidas em toda a UI. Qualquer cor nova deve derivar destas via opacity/rgba — nunca introduzir hex fora desta lista. */ /* Principais */ --color-offwhite: #F6F1EB; /* Off-white quente — fundo do app */ --color-beige: #E8DED2; /* Bege suave — painéis / sidebars */ --color-beige-rose: #EDE1DB; /* Bege rosado — cards / superfícies */ /* Secundárias */ --color-taupe: #B7A79A; /* Taupe — texto muted, borders suaves */ --color-brown: #8C7A6B; /* Marrom suave — texto primário */ /* Detalhes */ --color-rose: #D6A5A4; /* Rosado — accent detalhe */ --color-peach: #E6B8A2; /* Pêssego — accent secundário */ --color-terracota: #C48A6A; /* Terracota — accent primário */ /* Neutros utilitários (fora da paleta decorativa) */ --color-white: #FFFFFF; --color-danger: #B74F4F; /* Uso restrito: destructive actions */ /* ============ Roles semânticos ============ Role descreve INTENÇÃO ("superfície de card", "texto muted"). Sempre prefira estes em código novo — assim a marca pode evoluir uma vez só. */ /* Superfícies Hierarquia: bg (página) → bg-alt (containers/painéis) → surface (cards) → surface-raised (inputs/modais). surface usa offwhite propositalmente para contrastar com painéis em bege. */ --color-bg: var(--color-offwhite); --color-bg-alt: var(--color-beige); --color-surface: var(--color-offwhite); /* cards, conteúdo interno */ --color-surface-alt: var(--color-beige-rose); /* superfície alternativa quente/rosada */ --color-surface-raised: var(--color-white); /* inputs, modais, elementos elevados */ --color-surface-accent: var(--color-peach); /* Texto */ --color-text: var(--color-brown); --color-text-strong: var(--color-brown); --color-text-muted: var(--color-taupe); --color-text-soft: var(--color-taupe); --color-text-inverse: var(--color-offwhite); --color-text-accent: var(--color-terracota); /* ============================================================ HIERARQUIA DE COR — regra do sistema ------------------------------------------------------------ 1. PRINCIPAIS (offwhite / beige / beige-rose) → dominam todas as superfícies e fundos. 80-90% da tela. 2. SECUNDÁRIAS (brown / taupe) → base de texto, bordas, botões primários, estados ATIVOS. 3. DETALHES (rose / peach / terracota) → somente em pequenos acentos: ícones, pills, barras, bordas finas, progress bars. NUNCA como fundo de grandes áreas. → Terracota é o highlight do highlight. Evite usar como background de botões grandes, cards ativos, seções inteiras. Se um elemento for maior que ~40px e precisa de ênfase, use --color-action (marrom), não --color-accent. ============================================================ */ /* Ações & estados ativos (SECUNDÁRIAS — base para ênfase) */ --color-action: var(--color-brown); /* botão primário, aba ativa, hover */ --color-action-soft: var(--color-taupe); /* hover sutil, estados muted */ --color-action-tint: rgba(140, 122, 107, 0.10); --color-action-tint-strong: rgba(140, 122, 107, 0.18); /* Detalhes decorativos (DETALHES — uso restrito a pequenos acentos) */ --color-accent: var(--color-terracota); /* ícones, pills, linhas finas */ --color-accent-soft: var(--color-peach); /* realces suaves, círculos de ícone */ --color-accent-rose: var(--color-rose); --color-accent-tint: rgba(196, 138, 106, 0.10); --color-accent-tint-strong: rgba(196, 138, 106, 0.20); /* Borders derivadas do marrom suave */ --color-border: rgba(140, 122, 107, 0.15); --color-border-strong: rgba(140, 122, 107, 0.30); --color-border-accent: rgba(196, 138, 106, 0.40); --color-overlay: rgba(44, 36, 28, 0.50); --color-danger-tint: rgba(183, 79, 79, 0.10); /* ============ Tipografia ============ */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Raleway', 'Helvetica Neue', Arial, sans-serif; --font-num: 'Libre Franklin', 'Raleway', sans-serif; /* escala modular — 10, 11, 12, 13, 14, 16, 18, 22, 28, 36, 48 */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; --text-5xl: 48px; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: 0; --tracking-normal: 0.02em; --tracking-wide: 0.10em; --tracking-wider: 0.18em; --tracking-widest: 0.30em; /* pesos */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ============ Spacing (4pt grid) ============ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ============ Radius ============ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* ============ Shadows — warm tint ============ */ --shadow-xs: 0 1px 2px rgba(44, 36, 28, 0.04); --shadow-sm: 0 2px 6px rgba(44, 36, 28, 0.06); --shadow-md: 0 6px 14px rgba(196, 138, 106, 0.14); --shadow-lg: 0 10px 24px rgba(196, 138, 106, 0.18); --shadow-xl: 0 18px 40px rgba(140, 122, 107, 0.22); --shadow-2xl: 0 30px 70px rgba(44, 36, 28, 0.35); --shadow-focus: 0 0 0 3px rgba(196, 138, 106, 0.12); /* ============ Motion ============ */ --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* curva padrão (entra/sai) */ --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot suave */ --ease-linear: linear; --duration-fast: 180ms; --duration-base: 300ms; --duration-slow: 480ms; --transition-base: all var(--duration-base) var(--ease-standard); /* ============ Z-index ============ */ --z-base: 1; --z-sticky: 50; --z-dropdown: 100; --z-modal: 200; --z-toast: 300; /* ============ Layout ============ */ --container-max: 1280px; --content-padding: var(--space-7); --sidebar-w: 260px; /* breakpoints (referência — use nos @media; custom props não funcionam lá): --bp-sm: 600px --bp-md: 760px --bp-lg: 1000px --bp-xl: 1200px */ /* ============================================================ Aliases legados (--ec-*) Em uso pelas páginas atuais. NÃO usar em código novo. Mantidos apenas para compatibilidade durante a migração. ============================================================ */ --ec-bg: var(--color-bg); /* #F6F1EB */ --ec-bg-soft: var(--color-bg-alt); /* #E8DED2 */ --ec-bg-rose: var(--color-surface); /* #EDE1DB */ --ec-taupe: var(--color-text-muted); /* #B7A79A — agora alinhado à paleta oficial (antes #7C6A5D, fora da paleta) */ --ec-ink: var(--color-text-strong); /* #8C7A6B */ --ec-rose: var(--color-accent-rose); /* #D6A5A4 */ --ec-peach: var(--color-peach); /* #E6B8A2 */ --ec-terracota: var(--color-accent); /* #C48A6A */ --ec-serif: var(--font-serif); --ec-sans: var(--font-sans); --ec-num: var(--font-num); }