/* ===================================================================== INSTITUTO DRª MARCELA RODRIGUES — DESIGN TOKENS (tokens.css) Design System v1 · "Luxo Silencioso + Ciência com Alma" Fonte única da verdade dos tokens. Importe este arquivo antes do CSS de componentes: Paleta oficial da marca: #ffffff (branco clínico) · #7b0303 (bordô/vinho) · #b57170 (rosê envelhecido). Escalas 50–900 derivadas dessas âncoras. Convenções herdadas da linguagem da agência (FigStudio / Figueiredo Neto): tokens em :root, tipografia fluida com clamp(), sombras tingidas com a cor da marca, ritmo de seções alternando fundos, botões pílula. ===================================================================== */ :root { /* --------------------------------------------------------------- 1. CORES — ESCALAS --------------------------------------------------------------- */ /* Bordô / Vinho — PRIMÁRIA (autoridade, ciência, vitalidade, luxo). Âncora da marca = --bordo-700 (#7b0303). */ --bordo-50: #fbf0f0; --bordo-100: #f6dcdc; --bordo-200: #edb9b9; --bordo-300: #e08f8f; --bordo-400: #c85a5a; --bordo-500: #a52020; --bordo-600: #8a0d0d; --bordo-700: #7b0303; /* COR OFICIAL DA MARCA */ --bordo-800: #620404; --bordo-900: #4a0505; --bordo-950: #2f0303; /* Rosê envelhecido — SECUNDÁRIA / QUENTE (acolhimento, empatia, hospitalidade). Âncora da marca = --rose-500 (#b57170). ATENÇÃO A11Y: rose-500 tem 3.78:1 sobre branco — uso DECORATIVO / texto grande apenas. Para texto sobre branco use rose-600+ ; para faixa saturada com texto branco use rose-600 (5.18:1), não rose-500. */ --rose-50: #faf1f0; --rose-100: #f4e0df; --rose-200: #e9c7c5; --rose-300: #dba9a7; --rose-400: #c88b89; --rose-500: #b57170; /* COR OFICIAL DA MARCA */ --rose-600: #9c5b5a; --rose-700: #7e4746; --rose-800: #5f3534; --rose-900: #442726; /* Neutros clínicos (levemente quentes, para o branco não ficar frio). Base absoluta = branco clínico #ffffff. */ --neutral-0: #ffffff; /* BRANCO CLÍNICO — base absoluta / respiro */ --neutral-50: #fdfbfb; --neutral-100: #f5f2f2; --neutral-200: #e8e3e3; /* bordas padrão */ --neutral-300: #d6cfcf; /* bordas fortes / divisores */ --neutral-400: #b3aaaa; --neutral-500: #8a8080; /* texto muted (grande/secundário) */ --neutral-600: #6b6161; /* texto secundário seguro (5.99:1) */ --neutral-700: #4d4545; --neutral-800: #332e2e; --neutral-900: #1f1b1b; /* Areia rosada — fundo de transição/acolhimento (respiro quente). Usado em seções .section--cream. */ --areia-50: #faf5f4; --areia-100: #f6efee; /* Ink — tinta de texto quente (bordô-tingida) para amarrar o corpo à marca */ --ink: #2b1a1a; /* texto de corpo (16.6:1 sobre branco) */ /* Semânticas (feedback de formulário) — tingidas para caber na marca */ --success: #3f7d55; --warning: #b6832a; --danger: #b23a3a; --info: #5a6b8e; /* --------------------------------------------------------------- 2. CORES — ALIASES SEMÂNTICOS (use ESTES nos componentes) --------------------------------------------------------------- */ --color-bg: var(--neutral-0); /* fundo padrão do site */ --color-bg-cream: var(--areia-100); /* seções de transição (rosê pálido) */ --color-surface: var(--neutral-0); /* superfície de card */ --color-surface-2: var(--neutral-50); /* superfície interna sutil */ --color-primary: var(--bordo-700); /* ação principal / autoridade */ --color-primary-hover: var(--bordo-800); --color-primary-active:var(--bordo-900); --color-secondary: var(--rose-500); /* acolhimento (decorativo) */ --color-secondary-ink: var(--rose-600); /* rosê legível como texto/ícone */ --color-text: var(--ink); /* corpo */ --color-text-strong: var(--neutral-900); /* ênfase */ --color-text-muted: var(--neutral-600); /* secundário */ --color-text-subtle: var(--neutral-500); /* terciário (grande apenas) */ --color-text-inverse: var(--neutral-0); /* sobre fundo escuro */ --color-text-on-dark-muted: var(--rose-200);/* secundário sobre bordô */ --color-heading: var(--bordo-700); /* títulos display */ --color-link: var(--bordo-700); --color-link-hover: var(--bordo-900); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-border-rose: var(--rose-200); /* borda quente decorativa */ --color-focus: var(--bordo-600); /* anel de foco */ /* Fundos de "faixa statement" (usar com moderação) */ --color-band-bordo: var(--bordo-800); /* faixa autoridade (texto claro) */ --color-band-rose: var(--rose-600); /* faixa acolhimento (texto branco 5.18:1) */ --color-footer: var(--bordo-950); /* --------------------------------------------------------------- 3. TIPOGRAFIA Família única: Inter em todo o site (títulos em peso 600, corpo/UI em 400–500). Decisão de 07/2026 — substituiu a Fraunces. Recomendação de carregamento: Google Fonts com display=swap OU self-hosted .ttf/.woff2 (ver DESIGN-SYSTEM-MARCELA-V1.md §2.2). --------------------------------------------------------------- */ --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', Menlo, Consolas, monospace; /* Escala fluida (clamp: mobile → desktop) */ --fs-display: clamp(2.75rem, 6vw, 5rem); /* hero */ --fs-h1: clamp(2.25rem, 5vw, 3.5rem); --fs-h2: clamp(1.75rem, 4vw, 2.75rem); --fs-h3: clamp(1.375rem, 2.4vw, 1.75rem); --fs-h4: clamp(1.125rem, 1.8vw, 1.375rem); --fs-lead: clamp(1.125rem, 1.4vw, 1.3rem); --fs-body: 1rem; /* 16px base */ --fs-small: 0.875rem; --fs-eyebrow: 0.75rem; --fs-meta: 0.8125rem; --lh-tight: 1.05; --lh-heading: 1.15; --lh-body: 1.65; --lh-relaxed: 1.8; --ls-display: -0.02em; /* tracking negativo nos displays */ --ls-heading: -0.015em; --ls-body: 0; --ls-eyebrow: 0.18em; /* tracking largo nos eyebrows uppercase */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --------------------------------------------------------------- 4. ESPAÇAMENTO (base 4px) --------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* --------------------------------------------------------------- 5. LAYOUT --------------------------------------------------------------- */ --container: 1200px; /* boutique: um pouco mais intimista */ --container-narrow: 720px; /* coluna editorial (artigos de blog) */ --container-pad: 24px; /* mobile → sobrescrito nos breakpoints */ --section-pad-y: 88px; /* mobile → sobrescrito nos breakpoints */ /* --------------------------------------------------------------- 6. RAIOS (boutique = cantos suaves; botões em pílula) --------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; /* cards */ --radius-xl: 28px; /* painéis grandes */ --radius-pill: 999px; /* botões, chips, tags */ --radius-full: 9999px; /* --------------------------------------------------------------- 7. SOMBRAS — SEMPRE tingidas com bordô (rgba(123,3,3,·)), nunca preto. --------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(123,3,3,.04), 0 2px 6px rgba(123,3,3,.05); --shadow-md: 0 4px 12px rgba(123,3,3,.07); --shadow-lg: 0 12px 32px rgba(123,3,3,.09); --shadow-xl: 0 24px 56px rgba(123,3,3,.12); /* Sombra "quente" opcional para elementos de acolhimento (rosê) */ --shadow-rose: 0 12px 28px rgba(181,113,112,.16); /* --------------------------------------------------------------- 8. MOTION (discreto — "luxo silencioso") --------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* reveals premium */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 700ms; --transition: all var(--dur-base) var(--ease); /* --------------------------------------------------------------- 9. Z-INDEX --------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-header: 200; --z-whatsapp: 250; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* Overrides responsivos dos tokens de espaço (mobile-first) */ @media (min-width: 768px) { :root { --container-pad: 40px; --section-pad-y: 120px; } } @media (min-width: 1024px) { :root { --container-pad: 56px; --section-pad-y: 160px; } } /* Acessibilidade global: respeitar preferência de menos movimento */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }