/* ============================================================ Serra & Vale Equipamentos — Tokens da marca (cores, tipografia, espaçamento, base + helpers) Fontes carregadas via no , não por @import. ============================================================ */ :root { /* --- Marca: Laranja (logo) --- */ --amber-50: #fdf1e6; --amber-100: #f9d9bd; --amber-200: #f4b483; --amber-300: #ef8f49; --amber-400: #e96d09; /* primária — laranja do logo */ --amber-500: #cf5f07; --amber-600: #ab4e08; --amber-700: #843d0a; --amber-800: #5c2b09; --amber-900: #371a07; /* --- Graphite: aço carvão (logo) --- */ --graphite-50: #f4f6f7; --graphite-100: #e7eaed; --graphite-200: #d0d6db; --graphite-300: #aab3bb; --graphite-400: #7e8a94; --graphite-500: #5b6670; --graphite-600: #3f4954; --graphite-700: #2b343b; /* carvão do logo / tinta */ --graphite-800: #222a30; --graphite-900: #1b2026; /* aço mais escuro */ /* --- Terra (secundária) --- */ --terra-50: #f9efe7; --terra-100: #f0d4c0; --terra-200: #dca57e; --terra-300: #c47844; --terra-400: #b2541f; --terra-500: #8f4015; --terra-600: #6d3010; /* --- Semânticos --- */ --green-400: #3f9b5f; --green-600: #2c6f44; --red-400: #c43d2f; --red-600: #94281e; --blue-400: #3a72a8; --blue-600: #2a5078; --color-brand: var(--amber-400); --color-brand-hover: var(--amber-500); --color-brand-press: var(--amber-600); --color-accent: var(--amber-500); --text-strong: var(--graphite-900); --text-body: var(--graphite-700); --text-muted: var(--graphite-500); --text-faint: var(--graphite-400); --text-on-dark: var(--graphite-50); --text-link: var(--amber-600); --surface-page: var(--graphite-50); --surface-card: #ffffff; --surface-sunken: var(--graphite-100); --surface-dark: var(--graphite-900); --surface-dark-soft: var(--graphite-800); --surface-brand-tint: var(--amber-50); --border-subtle: var(--graphite-200); --border-default: var(--graphite-300); --border-strong: var(--graphite-400); --border-dark: var(--graphite-700); --color-success: var(--green-600); --color-success-tint: #e3f0e8; --color-danger: var(--red-400); --color-danger-tint: #f8e2df; --focus-ring: var(--amber-400); /* --- Tipografia --- */ --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; --font-sans: 'Barlow', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --leading-tight: 1.05; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-label: 0.12em; /* --- Espaçamento (grid 4px) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Raios (mecânicos) --- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; /* --- Bordas --- */ --border-hairline: 1px; --border-thin: 1.5px; --border-thick: 2px; --border-heavy: 3px; /* --- Sombras (firmes, baixo espalhamento) --- */ --shadow-xs: 0 1px 2px rgba(16,20,26,0.10); --shadow-sm: 0 2px 4px rgba(16,20,26,0.12); --shadow-md: 0 4px 12px rgba(16,20,26,0.14); --shadow-lg: 0 12px 28px rgba(16,20,26,0.18); --shadow-xl: 0 24px 48px rgba(16,20,26,0.24); /* --- Layout --- */ --container-max: 1200px; --container-pad: 24px; --header-height: 72px; /* --- Movimento (mecânico, decisivo) --- */ --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --z-sticky: 100; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: 16px; line-height: var(--leading-relaxed); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); line-height: var(--leading-tight); letter-spacing: 0.01em; margin: 0; } p { margin: 0; text-wrap: pretty; } img { max-width: 100%; display: block; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Eyebrow / kicker — rótulo mono maiúsculo da marca */ .sv-eyebrow { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--amber-600); /* contraste AA sobre fundo claro */ } /* Sobre fundos escuros (hero), tom mais claro para manter o contraste */ .hero .sv-eyebrow, .section--dark .sv-eyebrow, .cta-band .sv-eyebrow { color: var(--amber-300); } /* Régua-acento laranja */ .sv-hazard-stripe { background: linear-gradient(90deg, var(--amber-400), var(--amber-500)); } ::selection { background: var(--amber-200); color: var(--graphite-900); } :focus-visible { outline: var(--border-thick) solid var(--focus-ring); outline-offset: 2px; }