/* ============================================================================ QIM — Quiero Invertir Mejor · tokens de marca ---------------------------------------------------------------------------- Fonte canônica de valores: .claude/skills/qim-design-system/tokens/*.css Este arquivo é a versão achatada (sem @import encadeado) servida ao browser. Se um token mudar no design system, mude AQUI também — não há build step. As webfonts NÃO são carregadas aqui de propósito: um @import dentro do CSS é render-blocking em cascata. O do Google Fonts sai em app/Views/common/_qim_head.php, antes desta folha. ========================================================================= */ :root { /* ---- Paleta base — brand book §12. Hexes exatos, não deslocar. ---- */ --qim-ink: #102A43; /* Tinta — confiança, texto, fundos institucionais */ --qim-graphite: #273444; /* Grafito — texto secundário, superfície escura elevada */ --qim-decision: #18A67A; /* Decisión — progresso, ações principais */ --qim-clarity: #D8F36A; /* Claridad — destaque, marcação, energia */ --qim-signal: #F26B5B; /* Señal — alertas, contrapontos */ --qim-ivory: #F7F4EC; /* Marfil — calor editorial, fundo */ --qim-white: #FFFFFF; /* Blanco — respiro e contraste */ /* ---- Derivados. Só para hover, borda e wash — nunca como cor nova. ---- */ --qim-ink-90: rgba(16, 42, 67, .9); --qim-ink-72: rgba(16, 42, 67, .72); --qim-ink-60: rgba(16, 42, 67, .6); --qim-ink-20: rgba(16, 42, 67, .2); --qim-ink-08: rgba(16, 42, 67, .08); --qim-ink-dark: #0B1E31; --qim-decision-dark: #12855F; --qim-decision-wash: rgba(24, 166, 122, .12); --qim-clarity-dark: #C6E252; --qim-signal-wash: rgba(242, 107, 91, .14); --qim-ivory-deep: #EFEBE0; /* Proporção obrigatória de uso na página: 50% marfil/branco · 25% tinta · 15% verde · 7% lima · 3% coral */ /* ---- Tipografia ---- */ --qim-font-sans: "Manrope", "Avenir Next", Arial, sans-serif; --qim-font-serif: "Source Serif 4", Georgia, serif; --qim-font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --qim-weight-regular: 400; --qim-weight-medium: 500; --qim-weight-semibold: 600; --qim-weight-bold: 700; --qim-weight-black: 800; --qim-text-xs: .75rem; --qim-text-sm: .875rem; --qim-text-md: 1rem; --qim-text-lg: 1.25rem; --qim-text-xl: 1.75rem; --qim-text-2xl: 2.5rem; --qim-text-3xl: 3.25rem; --qim-text-hero: clamp(2.75rem, 6vw, 5.5rem); --qim-leading-tight: 1.06; --qim-leading-snug: 1.2; --qim-leading-normal: 1.45; --qim-leading-relaxed: 1.65; --qim-tracking-tight: -.02em; /* display sans */ --qim-tracking-normal: 0; --qim-tracking-wide: .08em; /* eyebrows e etiquetas em caixa alta */ --qim-tracking-data: .02em; /* ---- Espaçamento (base 8px) ---- */ --qim-space-1: 4px; --qim-space-2: 8px; --qim-space-3: 12px; --qim-space-4: 16px; --qim-space-5: 24px; --qim-space-6: 32px; --qim-space-7: 48px; --qim-space-8: 64px; --qim-space-9: 96px; --qim-space-10: 128px; --qim-content-max: 1200px; --qim-measure-editorial: 68ch; /* medida de leitura de artigo */ --qim-gutter: 24px; --qim-section-y: 96px; /* ---- Forma e elevação ---- */ --qim-radius-button: 10px; --qim-radius-card: 16px; --qim-radius-input: 10px; --qim-radius-media: 12px; --qim-radius-pill: 999px; /* cápsula: só etiqueta de categoria */ /* Proporção das capas. É a proporção NATIVA da arte gerada pelo portal — 450×280 (16:10), medido nos arquivos servidos. Em 16:9 as ilustrações perdiam a faixa de cima, justo onde a arte traz os rótulos ("Liquidez", "28 días"). Mudou a arte? Mude aqui, não no componente. */ --qim-ratio-media: 16 / 10; --qim-border-hairline: 1px solid var(--qim-ink-20); --qim-border-strong: 1.5px solid var(--qim-ink); --qim-rule-editorial: 1px solid var(--qim-ink-20); --qim-shadow-none: none; --qim-shadow-card: 0 1px 2px rgba(16, 42, 67, .06), 0 8px 24px rgba(16, 42, 67, .06); --qim-shadow-lifted: 0 2px 4px rgba(16, 42, 67, .08), 0 18px 40px rgba(16, 42, 67, .1); --qim-focus-ring: 0 0 0 3px rgba(24, 166, 122, .45); /* ---- Movimento ---- */ --qim-ease: cubic-bezier(.22, 1, .36, 1); --qim-ease-in-out: cubic-bezier(.4, 0, .2, 1); --qim-duration-fast: 160ms; --qim-duration-base: 280ms; --qim-duration-slow: 480ms; --qim-transition-ui: all var(--qim-duration-fast) var(--qim-ease); --qim-translate-press: 1px; /* press desce 1px, nunca escala */ /* ---- Camada semântica: use ESTES nomes nas views ---- */ --qim-surface-page: var(--qim-ivory); --qim-surface-card: var(--qim-white); --qim-surface-sunken: var(--qim-ivory-deep); --qim-surface-inverse: var(--qim-ink); --qim-surface-inverse-raised: var(--qim-graphite); --qim-surface-highlight: var(--qim-clarity); --qim-surface-accent: var(--qim-decision); --qim-surface-alert: var(--qim-signal-wash); --qim-text-strong: var(--qim-ink); --qim-text-body: var(--qim-graphite); --qim-text-muted: var(--qim-ink-60); --qim-text-on-inverse: var(--qim-white); --qim-text-on-accent: var(--qim-ink); /* tinta sobre Decisión = 4,72:1 */ --qim-text-on-highlight: var(--qim-ink); /* tinta sobre Claridad = 11,82:1 */ --qim-text-link: var(--qim-ink); --qim-text-link-hover: var(--qim-decision); --qim-border-subtle: var(--qim-ink-20); --qim-border-input: var(--qim-ink-20); --qim-border-input-focus: var(--qim-decision); --qim-divider: var(--qim-ink-08); --qim-action-primary-bg: var(--qim-decision); --qim-action-primary-bg-hover: var(--qim-decision-dark); --qim-action-primary-fg: var(--qim-ink); --qim-action-secondary-border: var(--qim-ink); --qim-action-secondary-fg: var(--qim-ink); --qim-action-secondary-bg-hover: var(--qim-ink-08); --qim-action-editorial-underline: var(--qim-clarity); --qim-state-alert: var(--qim-signal); --qim-state-positive: var(--qim-decision); --qim-state-neutral: var(--qim-ink-60); /* Séries de gráfico: tinta base, verde principal, lima destaque, coral alerta */ --qim-chart-1: var(--qim-ink); --qim-chart-2: var(--qim-decision); --qim-chart-3: var(--qim-clarity); --qim-chart-4: var(--qim-signal); --qim-chart-grid: var(--qim-ink-08); } @media (prefers-reduced-motion: reduce) { :root { --qim-duration-fast: 1ms; --qim-duration-base: 1ms; --qim-duration-slow: 1ms; } }