/* ========================================================================= OPES PARTNERS — DESIGN TOKENS ========================================================================= Esta é a ÚNICA fonte de verdade do sistema visual. Nenhum outro arquivo pode conter valor cru de cor, tamanho, espaço, peso ou sombra. Tudo se consome por var(--...). Camadas, na ordem em que devem ser lidas: 1. PRIMITIVAS — a paleta e as escalas brutas. Raramente mudam. 2. SEMÂNTICAS — o significado de cada primitiva no produto. É AQUI que se mexe para mudar a cara da marca. 3. COMPONENTE — ajustes finos por componente, derivados do semântico. Regra de ouro: componentes consomem SEMÂNTICAS, nunca PRIMITIVAS. ========================================================================= */ :root { /* ======================================================================= 1. PRIMITIVAS — COR ======================================================================= */ /* Navy — a cor institucional da casa. Azul tinta, profundo, sem brilho. 900 é a cor da marca; 950 é reservado a fundos de altíssimo contraste. */ --navy-50: #F2F6FA; --navy-100: #E1EAF3; --navy-200: #C3D3E5; --navy-300: #97B2CE; --navy-400: #648BB0; --navy-500: #416A92; --navy-600: #2F5175; --navy-700: #24405D; --navy-800: #1A304A; --navy-900: #0F243D; --navy-950: #081726; /* Bronze — o acento. Metal, permanência, valor. Usado com parcimônia: um acento que aparece em tudo deixa de ser acento. */ --bronze-100: #F7EEDE; --bronze-200: #EDD9B4; --bronze-300: #DFC188; --bronze-400: #C9A25A; --bronze-500: #AE8438; --bronze-600: #8E6A28; --bronze-700: #6E521F; /* Neutros — cinzas levemente frios, para conversar com o navy. */ --neutral-0: #FFFFFF; --neutral-50: #F8FAFB; --neutral-100: #F1F4F6; --neutral-200: #E3E8EC; --neutral-300: #CBD3DA; --neutral-400: #9EAAB5; --neutral-450: #7E8A96; /* menor valor que atinge 3:1 sobre branco (WCAG 1.4.11) */ --neutral-500: #647079; --neutral-600: #55616C; --neutral-700: #3E4851; --neutral-800: #2A323A; --neutral-900: #191F25; --neutral-950: #0D1114; /* Estados — dessaturados de propósito. Um site institucional não pisca. */ --success-100: #E4F0E8; --success-600: #2F6B45; --warning-100: #FBF0DC; --warning-600: #8A6115; --danger-100: #F8E7E7; --danger-600: #9B2C2C; /* ======================================================================= 1. PRIMITIVAS — TIPOGRAFIA ======================================================================= */ /* Serifa no display: carrega a autoridade institucional. Sans no corpo: mantém legível o texto técnico e os números. Toda face tem pilha de fallback real — a página não pode depender do Google Fonts carregar. */ --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, 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, Consolas, "Liberation Mono", monospace; /* Escala modular de 8 degraus (razão ~1.25, ajustada à mão no topo). */ --text-xs: 0.75rem; /* 12px — legendas, rótulos de token */ --text-sm: 0.875rem; /* 14px — texto auxiliar, help de formulário */ --text-base: 1rem; /* 16px — corpo padrão */ --text-lg: 1.125rem; /* 18px — corpo destacado, subheadline curta */ --text-xl: 1.375rem; /* 22px — subheadline, título de card */ --text-2xl: 1.75rem; /* 28px — título de subseção */ --text-3xl: 2.25rem; /* 36px — título de seção (mobile: h2) */ --text-4xl: 2.875rem; /* 46px — título de seção (desktop) */ --text-5xl: 3.5rem; /* 56px — headline do hero (tablet) */ --text-6xl: 4.25rem; /* 68px — headline do hero (desktop) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.08; /* headlines grandes em serifa */ --leading-snug: 1.25; /* títulos de seção e de card */ --leading-normal: 1.5; /* interface */ --leading-relaxed: 1.65; /* blocos de leitura corrida */ --tracking-tighter: -0.03em; /* display grande: fecha o espaçamento */ --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-widest: 0.14em; /* eyebrows em caixa alta */ /* ======================================================================= 1. PRIMITIVAS — ESPAÇO ======================================================================= */ /* Régua de 4px. Todo espaço do sistema é um múltiplo dela. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ======================================================================= 1. PRIMITIVAS — FORMA E ELEVAÇÃO ======================================================================= */ /* Raio pequeno: sobriedade. Cantos muito arredondados leem como consumer. */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 999px; --border-width: 1px; --border-width-thick: 2px; /* Sombras discretas, tingidas de navy em vez de preto puro — preto puro sobre fundo frio suja a cor. */ --shadow-sm: 0 1px 2px rgba(15, 36, 61, 0.06); --shadow-md: 0 2px 4px rgba(15, 36, 61, 0.06), 0 4px 12px rgba(15, 36, 61, 0.05); --shadow-lg: 0 4px 8px rgba(15, 36, 61, 0.06), 0 12px 32px rgba(15, 36, 61, 0.08); /* ======================================================================= 1. PRIMITIVAS — LAYOUT E MOVIMENTO ======================================================================= */ --container-max: 1200px; --container-text: 68ch; /* medida de leitura confortável */ --gutter: var(--space-6); --gutter-lg: var(--space-8); --grid-columns: 12; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ======================================================================= 2. SEMÂNTICAS — é aqui que se muda a marca ======================================================================= */ --brand-name: "Opes Partners"; /* Superfícies */ --color-bg: var(--neutral-0); --color-bg-subtle: var(--neutral-50); --color-bg-muted: var(--neutral-100); --color-bg-inverse: var(--navy-900); --color-bg-inverse-2: var(--navy-950); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-0); /* Texto sobre superfície clara */ --color-text: var(--navy-900); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-500); /* Texto sobre superfície escura (navy-900) */ --color-text-inverse: var(--neutral-0); --color-text-inverse-muted: var(--navy-200); /* Traços */ --color-border: var(--neutral-200); /* decorativa: divisores, cards */ --color-border-strong: var(--neutral-300); /* decorativa, mais presente */ --color-border-control: var(--neutral-450); /* inputs: >= 3:1, obrigatorio */ --color-border-inverse: rgba(255, 255, 255, 0.14); /* Estados sobre superfície escura */ --color-surface-inverse-hover: var(--navy-100); --color-overlay-inverse-hover: rgba(255, 255, 255, 0.08); /* Marca e acento */ --color-primary: var(--navy-900); --color-primary-hover: var(--navy-800); --color-primary-active: var(--navy-950); --color-on-primary: var(--neutral-0); /* Bronze tem DOIS papéis, e eles não são intercambiáveis: - accent-text: escuro o bastante para ser texto sobre branco (AA). - accent-on-dark: claro o bastante para ser texto sobre navy (AA). Trocar um pelo outro quebra o contraste. */ --color-accent: var(--bronze-600); --color-accent-text: var(--bronze-700); --color-accent-on-dark: var(--bronze-300); --color-accent-subtle: var(--bronze-100); /* Arco do monograma: precisa se separar do anel navy E do fundo branco. bronze-500 e' o unico degrau que atende os dois lados. */ --color-brand-arc: var(--bronze-500); /* Foco — precisa ser visível sobre fundo claro E escuro */ --color-focus: var(--bronze-500); --focus-ring: 0 0 0 3px rgba(174, 132, 56, 0.45); /* Estados */ --color-success: var(--success-600); --color-success-bg: var(--success-100); --color-warning: var(--warning-600); --color-warning-bg: var(--warning-100); --color-danger: var(--danger-600); --color-danger-bg: var(--danger-100); /* ======================================================================= 3. COMPONENTE — derivado do semântico ======================================================================= */ --nav-height: 72px; --nav-bg: rgba(255, 255, 255, 0.88); --nav-bg-scrolled: rgba(255, 255, 255, 0.96); --button-height-md: 44px; --button-height-lg: 52px; --button-padding-md: 0 var(--space-6); --button-padding-lg: 0 var(--space-8); --card-padding: var(--space-8); --section-padding-y: var(--space-24); --input-height: 48px; } /* Régua maior a partir do tablet: as seções e o display respiram. */ @media (min-width: 768px) { :root { --gutter: var(--gutter-lg); --section-padding-y: var(--space-32); } } /* Quem pediu menos movimento, recebe menos movimento. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }