/* ============================================================ MUSIMEE · DESIGN TOKENS · v2.0 · TEMA LIGHT ÚNICO ------------------------------------------------------------ Fonte de verdade: musimee-brand-kit (Ink · Paper · Stone · Signal). Escalas derivadas em OKLab a partir das 4 cores oficiais. Todo par de contraste foi calculado — os valores estão anotados. NÃO existe dark mode. Fundo escuro é um RECURSO de seção (.on-ink), não um tema. Ver docs/00-fundacao/cor.md. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Instrument+Serif:ital@0;1&display=swap'); :root { /* == 1. ANCORAS DE MARCA (imutaveis - vem do brand kit) ===== */ --m-ink: #2B2926; /* texto, símbolo, fundos escuros */ --m-paper: #F7F4EC; /* fundo base */ --m-stone: #DAD6CD; /* divisões, apoio */ --m-signal: #F0793B; /* acento — 1 por peça */ /* == 2. ESCALA SIGNAL (laranja) ============================= Contraste medido · P = sobre Paper · I = Ink sobre a cor */ --m-signal-50: #FFEEDD; /* P 1.03 · fundo de destaque */ --m-signal-100: #FFDFC7; /* P 1.15 · chip suave */ --m-signal-200: #FFC8A5; /* P 1.36 · borda de destaque */ --m-signal-300: #FFAC7F; /* P 1.67 · gradiente / ilustração */ --m-signal-400: #FF9059; /* P 2.04 · gradiente */ --m-signal-500: #F0793B; /* MARCA · Ink sobre ela 5.18 AA-OK */ --m-signal-600: #D9621C; /* P 3.34 AA-large / ícone / borda */ --m-signal-700: #B44A02; /* P 4.87 · alt 4.70 · surf 5.33 AA-OK texto e link */ --m-signal-800: #953B00; /* P 6.58 · texto forte */ --m-signal-900: #752D00; /* P 8.96 */ --m-signal-950: #521F02; /* P 12.28 */ /* == 3. ESCALA NEUTRA QUENTE (Paper -> Ink) ================= Não é cinza de framework: 50 = Paper, 900 = Ink exatos. */ --m-neutral-0: #FFFFF7; /* P 1.09 · superfície acima do papel */ --m-neutral-50: #F7F4EC; /* = Paper */ --m-neutral-100: #F3F0E8; /* P 1.04 · faixa alternada */ --m-neutral-200: #E2DFD8; /* P 1.21 · borda padrão */ --m-neutral-300: #D2CFC8; /* P 1.42 · borda forte (vizinha Stone) */ --m-neutral-400: #ACA9A3; /* P 2.13 · decorativo, NUNCA texto */ --m-neutral-500: #8A8782; /* P 3.26 · alt 3.14 · ícone, placeholder */ --m-neutral-600: #6E6C67; /* P 4.77 · alt 4.61 AA-OK · piso do muted */ --m-neutral-700: #595652; /* P 6.64 AA-OK · corpo de texto */ --m-neutral-800: #403E3B; /* P 9.70 AA-OK */ --m-neutral-900: #2B2926; /* = Ink · P 13.20 AA-OK */ --m-neutral-950: #191714; /* P 16.27 · preto editorial */ /* == 4. SEMANTICOS (todos >=4.5 sobre Paper e com branco) === */ --m-success: #186B41; /* P 5.94 */ --m-success-soft: #E4F0E8; --m-warning: #9A5200; /* P 5.34 — âmbar-terra, NUNCA dourado */ --m-warning-soft: #FBEBD6; --m-danger: #A82F2A; /* P 6.15 */ --m-danger-soft: #F8E5E2; --m-info: #2A6B87; /* P 5.38 */ --m-info-soft: #E3EEF3; /* == 5. PAPEIS SEMANTICOS · use SEMPRE estes, nunca o hex === */ /* superfície */ --m-bg: var(--m-paper); --m-bg-alt: var(--m-neutral-100); --m-surface: var(--m-neutral-0); --m-surface-alt: var(--m-neutral-100); --m-surface-ink: var(--m-ink); --m-surface-signal: var(--m-signal-500); /* texto sobre superfície clara */ --m-text: var(--m-neutral-900); /* títulos */ --m-text-body: var(--m-neutral-700); /* parágrafo */ --m-text-muted: var(--m-neutral-600); /* secundário (piso AA)*/ --m-text-faint: var(--m-neutral-500); /* ícone/placeholder */ --m-text-link: var(--m-signal-700); /* 4.87 · sublinhado */ /* texto sobre superfície escura ou laranja */ --m-text-on-ink: var(--m-paper); /* 13.20 */ --m-text-on-ink-body: #DDD8CE; /* 10.40 sobre Ink */ --m-text-on-ink-muted: #A9A49A; /* 6.10 sobre Ink */ --m-text-on-signal: var(--m-ink); /* 5.18 */ /* bordas */ --m-border: var(--m-neutral-200); --m-border-strong: var(--m-stone); --m-border-soft: rgba(43, 41, 38, 0.07); --m-border-ink: rgba(247, 244, 236, 0.16); /* dentro de .on-ink */ /* acento */ --m-accent: var(--m-signal-500); /* preenchimento, gráfico */ --m-accent-text: var(--m-signal-700); /* texto/link/ícone sobre paper */ --m-accent-line: var(--m-signal-600); /* borda/underline decorativa */ --m-accent-wash: var(--m-signal-50); /* fundo suave */ /* foco visível (a11y) */ --m-focus: 0 0 0 3px rgba(240, 121, 59, 0.45), 0 0 0 1px var(--m-ink); /* == 6. TIPOGRAFIA ========================================== */ --m-font-display: 'Space Grotesk', system-ui, sans-serif; /* títulos + logo */ --m-font: 'DM Sans', system-ui, sans-serif; /* corpo + UI */ --m-font-mono: 'DM Mono', ui-monospace, monospace; /* números, eyebrow */ --m-font-voice: 'Instrument Serif', Georgia, serif; /* SO letra de musica e memoria citada */ /* escala fluida — landing */ --m-fs-hero: clamp(2.75rem, 1.4rem + 6.2vw, 6rem); --m-fs-display: clamp(2.25rem, 1.3rem + 4.4vw, 4.25rem); --m-fs-h1: clamp(1.9rem, 1.2rem + 3.0vw, 3rem); --m-fs-h2: clamp(1.5rem, 1.1rem + 1.9vw, 2.25rem); --m-fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); --m-fs-h4: 1.125rem; /* escala fixa — produto (densidade previsível) */ --m-fs-xs: 0.75rem; --m-fs-sm: 0.8125rem; --m-fs-base: 0.9375rem; --m-fs-md: 1rem; --m-fs-lg: 1.125rem; --m-fs-xl: 1.375rem; --m-lh-hero: 0.98; --m-lh-tight: 1.08; --m-lh-snug: 1.25; --m-lh-normal: 1.6; /* corpo — regra do brand kit */ --m-lh-loose: 1.75; --m-ls-logo: -0.05em; --m-ls-display: -0.04em; --m-ls-heading: -0.03em; --m-ls-body: -0.01em; --m-ls-eyebrow: 0.16em; /* mono uppercase */ --m-fw-light: 300; --m-fw-regular: 400; --m-fw-medium: 500; --m-fw-semibold: 600; --m-fw-bold: 700; /* SO display e logo */ /* == 7. ESPACO (baseline 4) ================================= */ --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 20px; --m-6: 24px; --m-8: 32px; --m-10: 40px; --m-12: 48px; --m-16: 64px; --m-20: 80px; --m-24: 96px; --m-32: 128px; --m-40: 160px; /* respiro vertical de seção — landing respira, produto não */ --m-section-y: clamp(64px, 9vw, 160px); --m-section-y-tight: clamp(40px, 5vw, 80px); --m-block-gap: clamp(24px, 3.5vw, 56px); /* == 8. LAYOUT ============================================== */ --m-container: 1200px; --m-container-wide: 1400px; --m-content: 680px; /* medida de leitura ~68ch */ --m-narrow: 520px; --m-gutter: clamp(20px, 5vw, 64px); --m-touch: 44px; /* breakpoints (constantes documentadas — CSS var não roda em @media) sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */ /* == 9. RAIOS =============================================== */ --m-r-xs: 6px; --m-r-sm: 10px; --m-r: 12px; --m-r-md: 16px; --m-r-lg: 22px; --m-r-xl: 32px; --m-r-2xl: 44px; --m-r-pill: 999px; --m-r-icon: 22%; /* app icon (squircle) */ /* == 10. SOMBRAS — luz quente, nunca cinza-azulada ========== */ --m-sh-xs: 0 1px 2px rgba(43,41,38,0.05); --m-sh-sm: 0 2px 6px rgba(43,41,38,0.06); --m-sh: 0 8px 20px -6px rgba(43,41,38,0.10), 0 2px 6px rgba(43,41,38,0.05); --m-sh-md: 0 18px 40px -12px rgba(43,41,38,0.16), 0 4px 10px rgba(43,41,38,0.05); --m-sh-lg: 0 36px 80px -24px rgba(43,41,38,0.24), 0 8px 20px rgba(43,41,38,0.06); --m-sh-signal: 0 12px 32px -10px rgba(240,121,59,0.55); --m-sh-inset: inset 0 1px 0 rgba(255,255,255,0.6); /* == 11. MOVIMENTO ========================================== */ --m-ease: cubic-bezier(0.22, 1, 0.36, 1); /* out-quint · padrão */ --m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --m-ease-spring: cubic-bezier(0.34, 1.42, 0.52, 1); --m-t-instant: 120ms var(--m-ease); --m-t-fast: 200ms var(--m-ease); --m-t: 320ms var(--m-ease); --m-t-slow: 560ms var(--m-ease); --m-t-scene: 900ms var(--m-ease); /* SO landing (motion narrativo) */ /* == 12. TEXTURA — a "vida" da camada expressiva ============ */ --m-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); --m-glow-warm: radial-gradient(60% 55% at 50% 0%, rgba(240,121,59,0.16), transparent 70%); --m-glow-soft: radial-gradient(50% 50% at 80% 20%, rgba(255,172,127,0.22), transparent 70%); } /* == SECAO EM FUNDO ESCURO =================================== Não é dark mode. É uma seção de respiro dentro da página clara. Aplique .on-ink no
e os tokens de texto/borda viram. */ .on-ink { background: var(--m-ink); --m-text: var(--m-paper); --m-text-body: #DDD8CE; /* 10.4 sobre ink */ --m-text-muted: #A9A49A; /* 6.1 sobre ink */ --m-text-faint: #807B72; /* 3.5 sobre ink — não-texto */ --m-text-link: var(--m-signal-500); /* 5.18 */ --m-accent-text: var(--m-signal-500); --m-surface: #35322E; --m-surface-alt: #3E3A35; --m-border: var(--m-border-ink); --m-border-strong: rgba(247,244,236,0.28); --m-border-soft: rgba(247,244,236,0.09); color: var(--m-text-body); } /* == SECAO EM LARANJA ======================================== Texto SEMPRE Ink (5.18). Branco sobre signal REPROVA (2.80). */ .on-signal { background: var(--m-signal-500); --m-text: var(--m-ink); --m-text-body: #3A2716; --m-text-muted: #412810; --m-text-link: var(--m-ink); --m-surface: rgba(255,255,255,0.85); --m-border: rgba(43,41,38,0.22); --m-border-strong: rgba(43,41,38,0.4); color: var(--m-text-body); } /* == RESET MINIMO + BASE ===================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--m-bg); color: var(--m-text-body); font-family: var(--m-font); font-size: var(--m-fs-md); line-height: var(--m-lh-normal); letter-spacing: var(--m-ls-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--m-font-display); font-weight: var(--m-fw-bold); letter-spacing: var(--m-ls-display); line-height: var(--m-lh-tight); color: var(--m-text); margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--m-text-link); } p a, li a { text-decoration: underline; text-underline-offset: 0.18em; } :focus-visible { outline: none; box-shadow: var(--m-focus); border-radius: var(--m-r-xs); } ::selection { background: var(--m-signal-200); color: var(--m-ink); } /* números sempre alinhados em tabela/KPI/preço */ /* DM Mono saiu: servia a 4 rotulos de duracao e custava uma familia inteira. tabular-nums alinha os digitos igual. */ .m-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* == KEYFRAMES COMPARTILHADOS ================================ */ @keyframes m-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes m-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes m-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes m-bar { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } } @keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes m-toast { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } /* == ACESSIBILIDADE · não-negociável ========================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .m-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }