/* ========================================================================== MY FIRST CROCHET — DESIGN TOKENS Ecossistema: My First Crochet Direção visual: Pinterest + Cozy + Modern American Lifestyle -------------------------------------------------------------------------- Este arquivo é a ÚNICA fonte de verdade de cor, tipografia e espaçamento de todo o ecossistema (sales page, upsells, PDFs, área de membros). Nenhum HEX solto deve existir fora daqui. Prefixo --mfc-* = primitivos da marca (paleta crua, escalas) Sem prefixo = tokens semânticos (é o que as páginas devem usar) ========================================================================== */ :root { /* ====================================================================== 1. PALETA DA MARCA — as 5 cores oficiais ====================================================================== */ --mfc-cream: #FAF6F0; /* Cream — fundo, papel quente */ --mfc-beige: #E8DDCE; /* Warm Beige — superfícies secundárias */ --mfc-sage: #8A9A85; /* Muted Sage — acento calmo, natureza */ --mfc-terracotta: #C4714F; /* Soft Terracotta— acento quente, yarn */ --mfc-charcoal: #2B2825; /* Charcoal — texto, quase-preto quente */ /* ====================================================================== 2. ESCALAS — cada cor da marca desdobrada Números seguem a convenção 50 (mais claro) → 900 (mais escuro) ====================================================================== */ /* Cream / neutros quentes -------------------------------------------- */ --mfc-cream-50: #FDFBF8; /* quase branco, ainda quente */ --mfc-cream-100: #FAF6F0; /* ★ Cream oficial */ --mfc-cream-200: #F5EFE6; /* faixa alternada de seção */ /* Warm Beige ---------------------------------------------------------- */ --mfc-beige-200: #F1E9DE; /* superfície suave */ --mfc-beige-300: #E8DDCE; /* ★ Warm Beige oficial */ --mfc-beige-400: #D8C9B4; /* borda com presença */ --mfc-beige-500: #C2AF95; /* divisor forte, ilustração */ /* Muted Sage ---------------------------------------------------------- */ --mfc-sage-100: #EEF2EC; /* fundo de badge/tag */ --mfc-sage-200: #DCE3D8; /* fundo de destaque calmo */ --mfc-sage-300: #B9C4B4; /* borda de card sage */ --mfc-sage-500: #8A9A85; /* ★ Muted Sage oficial */ --mfc-sage-700: #5C6B57; /* texto sage legível sobre cream (7.1:1) */ --mfc-sage-800: #46523F; /* sage profundo */ /* Soft Terracotta ----------------------------------------------------- */ --mfc-terra-100: #FAEDE6; /* fundo de badge quente */ --mfc-terra-200: #F2D8C8; /* superfície quente */ --mfc-terra-300: #E4A98D; /* ilustração, hover suave */ --mfc-terra-500: #C4714F; /* ★ Soft Terracotta oficial (decorativo) */ --mfc-terra-600: #A85638; /* CTA — 5.18:1 com branco, passa AA */ --mfc-terra-700: #8E4527; /* CTA hover / pressed */ --mfc-terra-800: #6F3319; /* texto terracotta sobre cream */ /* Charcoal ------------------------------------------------------------ */ --mfc-charcoal-900: #2B2825; /* ★ Charcoal oficial — texto principal */ --mfc-charcoal-800: #3A3530; --mfc-charcoal-700: #4A443E; --mfc-charcoal-500: #6E655C; /* texto secundário — 5.30:1 sobre cream */ --mfc-charcoal-300: #9A9086; --mfc-charcoal-100: #D6CFC6; /* ====================================================================== 3. TOKENS SEMÂNTICOS — use SEMPRE estes nas páginas ====================================================================== */ /* Superfícies --------------------------------------------------------- */ --background: var(--mfc-cream-100); --background-alt: var(--mfc-cream-200); /* seção alternada */ --background-deep: var(--mfc-beige-300); /* seção de respiro */ --surface: #FFFFFF; /* card */ --surface-muted: var(--mfc-beige-200); /* card secundário */ --surface-inverse: var(--mfc-charcoal-900);/* seção escura */ /* Bordas -------------------------------------------------------------- */ --border: #E3D8C9; --border-soft: #EFE7DB; --border-strong: var(--mfc-beige-400); --border-inverse: #46403A; /* Texto --------------------------------------------------------------- */ --text-primary: var(--mfc-charcoal-900); --text-secondary: var(--mfc-charcoal-500); --text-muted: var(--mfc-charcoal-300); --text-inverse: #FDFBF8; --text-inverse-soft: #C9C1B8; --text-on-cta: #FFFFFF; /* CTA ----------------------------------------------------------------- */ --cta: var(--mfc-terra-600); --cta-hover: var(--mfc-terra-700); --cta-active: var(--mfc-terra-800); --cta-soft: var(--mfc-terra-100); --cta-ring: rgba(168, 86, 56, .28); /* Acento (secundário, calmo) ------------------------------------------ */ --accent: var(--mfc-sage-500); --accent-strong: var(--mfc-sage-700); --accent-soft: var(--mfc-sage-200); --accent-faint: var(--mfc-sage-100); /* Estados ------------------------------------------------------------- */ --success: #55704F; --success-soft: #E6EDE2; --warning: #B07A2E; --warning-soft: #F8EEDC; --focus-ring: var(--mfc-terra-600); /* ====================================================================== 4. TIPOGRAFIA Display: Fraunces — serif variável, soft, "cozy modern". Nada de vovó. Corpo: Inter — sans humanista, alta legibilidade em mobile. ====================================================================== */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Escala fluida — sem media query para texto ------------------------- */ --fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.5rem); /* 40 → 72 */ --fs-h1: clamp(2.125rem, 1.3rem + 3.3vw, 3.5rem); /* 34 → 56 */ --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); /* 28 → 44 */ --fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);/* 22 → 30 */ --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 → 22 */ --fs-lead: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem); /* 17 → 21 */ --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16 → 17 */ --fs-small: 0.9375rem; /* 15 */ --fs-tiny: 0.8125rem; /* 13 */ --fs-eyebrow: 0.75rem; /* 12 */ /* Pesos --------------------------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 600; /* Fraunces fica pesada demais em 700 */ /* Entrelinha ---------------------------------------------------------- */ --lh-tight: 1.08; --lh-heading: 1.18; --lh-snug: 1.35; --lh-body: 1.65; --lh-loose: 1.8; /* Tracking ------------------------------------------------------------ */ --ls-display: -0.025em; --ls-heading: -0.018em; --ls-body: 0; --ls-eyebrow: 0.16em; /* ====================================================================== 5. ESPAÇAMENTO — escala de 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 */ /* Respiro vertical de seção, fluido ----------------------------------- */ --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); /* ====================================================================== 6. LAYOUT ====================================================================== */ --container: 1180px; --container-narrow: 780px; --container-text: 660px; /* largura de leitura confortável */ --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); /* ====================================================================== 7. FORMA — raios, sombras, bordas ====================================================================== */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* Sombras quentes — nunca cinza puro, sempre com base marrom */ --shadow-xs: 0 1px 2px rgba(43, 40, 37, .05); --shadow-sm: 0 2px 8px rgba(43, 40, 37, .06); --shadow-md: 0 8px 24px rgba(43, 40, 37, .08); --shadow-lg: 0 18px 48px rgba(43, 40, 37, .10); --shadow-xl: 0 32px 80px rgba(43, 40, 37, .14); --shadow-cta: 0 8px 20px rgba(168, 86, 56, .26); /* ====================================================================== 8. MOVIMENTO ====================================================================== */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms; /* ====================================================================== 9. CAMADAS ====================================================================== */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 900; --z-modal: 1000; --z-debug: 9999; } /* ========================================================================== ACESSIBILIDADE — contrastes conferidos (WCAG 2.1) -------------------------------------------------------------------------- text-primary (#2B2825) sobre background (#FAF6F0) .......... 13.9:1 AAA text-secondary (#6E655C) sobre background .................. 5.30:1 AA text-on-cta (#FFFFFF) sobre cta (#A85638) .................. 5.18:1 AA accent-strong (#5C6B57) sobre background ................... 6.35:1 AA text-inverse (#FDFBF8) sobre surface-inverse (#2B2825) ..... 13.7:1 AAA -------------------------------------------------------------------------- ATENÇÃO: --mfc-terra-500 (#C4714F) é DECORATIVO. Contraste com branco é 3.6:1 — só pode receber texto grande (≥24px ou ≥18.66px bold). Para botão/CTA use SEMPRE --cta (--mfc-terra-600). ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }