/* ========================================================================== Design tokens — ProAds Marketing Source: ui-guide/guia-ui-webdesign-proads-marketing.md §15 (light) and §19 (light/dark theme contract). Every dark value is a tonal derivation of the official palette — no hue exists here that is absent from the brand material, except the four functional states, which are restricted to forms and alerts and never used as brand or CTA colour. Palette discipline (guide §3.2, §16): petróleo · preto · branco · sage. The dark theme is not a new identity — it is the brand's own signature background (sage → petróleo → black) promoted from hero to page. Theme mechanics: values are declared with light-dark(, ) and resolved by `color-scheme`. Each is preceded by a plain fallback so older browsers get the light theme rather than a broken palette. Full contract in the engine's own tokens.css header. Roles that invert differently — do not swap them: --color-structure always-dark SURFACE (footer, dark bands). Dark in both. --color-heading heading text. Dark on light, LIGHT on dark. --color-text-inverse text ON --color-structure. Always light. --color-on-accent text ON --color-accent. Inverts, because petróleo gives way to sage as the accent in dark mode. ========================================================================== */ :root { color-scheme: light dark; /* ---- Surfaces ---- */ --color-base: #FFFFFF; --color-base: light-dark(#FFFFFF, #021014); --color-surface: #FFFFFF; --color-surface: light-dark(#FFFFFF, #052227); --color-surface-alt: #F5F8F8; --color-surface-alt: light-dark(#F5F8F8, #041B1F); --color-structure: #00363E; /* petróleo — footer, dark bands */ --color-structure: light-dark(#00363E, #002A31); /* ---- Interactive ---- Petróleo is the light-theme accent (guide §5.1). On a dark page it fails contrast, so the dark theme promotes #8AACA8 — the lightest stop of the signature gradient, already part of the official palette. */ --color-accent: #00363E; --color-accent: light-dark(#00363E, #8AACA8); --color-accent-hover: #000504; /* light: deepens · dark: brightens */ --color-accent-hover: light-dark(#000504, #C8DAD5); --color-on-accent: #FFFFFF; --color-on-accent: light-dark(#FFFFFF, #00232A); --color-secondary: #C8DAD5; /* sage — badges, eyebrows on dark */ /* Tinted wash behind badges and quoted blocks: the accent at low alpha, so it tracks whichever accent the theme resolved instead of being a fifth hardcoded colour. */ --color-accent-soft: rgba(0, 54, 62, 0.07); --color-accent-soft: light-dark(rgba(0, 54, 62, 0.07), rgba(138, 172, 168, 0.14)); /* Focus ring over the signature gradient, where the light-theme accent (petróleo on near-black) would be invisible. Sage in both themes. */ --color-focus-on-dark: #C8DAD5; /* ---- Text ---- */ --color-heading: #0D1B1D; --color-heading: light-dark(#0D1B1D, #EAF2F0); --color-text-primary: #0D1B1D; --color-text-primary: light-dark(#0D1B1D, #DCE7E5); --color-text-secondary: #55696B; --color-text-secondary: light-dark(#55696B, #93A8A8); --color-text-inverse: #FFFFFF; --color-text-inverse: light-dark(#FFFFFF, #EAF2F0); /* ---- Lines ---- --color-border is decorative (card edges, dividers) and deliberately quiet. --color-border-strong is for boundaries that identify a control — input fields above all — and clears WCAG 1.4.11 (3:1) in BOTH themes: 3.96:1 on white, 4.08:1 on the dark base. */ --color-border: #DCE4E3; --color-border: light-dark(#DCE4E3, #123037); --color-border-strong: #6E8486; --color-border-strong: light-dark(#6E8486, #57797D); --color-divider: #E7ECEC; --color-divider: light-dark(#E7ECEC, #0C2429); /* ---- Functional states — forms and alerts only, never brand/CTA ---- */ --color-success: #2F9E6E; --color-success: light-dark(#2F9E6E, #5FC492); --color-warning: #E8A93B; --color-warning: light-dark(#E8A93B, #F0C070); --color-error: #E5484D; --color-error: light-dark(#E5484D, #FF8F8F); --color-info: #3B82C4; --color-info: light-dark(#3B82C4, #7FB3E0); /* ---- Draft banner (engine) ---- */ --color-draft: #7a5b1f; --color-draft: light-dark(#7a5b1f, #D8B256); --color-on-draft: #FFFFFF; --color-on-draft: light-dark(#FFFFFF, #17130A); /* ---- Signature gradient — CSS only, never a bitmap (guide §14) ---- Gradient colour stops accept light-dark(), so both themes live in one declaration. The dark variant is deepened so the hero does not glow brighter than the page it sits on. */ --gradient-hero: radial-gradient(140% 140% at 12% 8%, light-dark(#8AACA8, #4E7873) 0%, light-dark(#1C5E67, #12454E) 28%, light-dark(#00363E, #002A31) 55%, #000000 100%); --gradient-hero-mobile: linear-gradient(160deg, light-dark(#8AACA8, #4E7873) 0%, light-dark(#1C5E67, #12454E) 26%, light-dark(#00363E, #002A31) 58%, #000000 100%); /* ---- Typography (guide §4) ---- */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --text-h1: clamp(32px, 4.5vw, 56px); --text-h2: clamp(26px, 3.2vw, 40px); --text-h3: clamp(20px, 2.2vw, 28px); --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-body: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.2rem, 0.6vw + 1rem, 1.375rem); --text-2xl: clamp(1.45rem, 1vw + 1.1rem, 1.75rem); --text-3xl: var(--text-h2); --text-4xl: var(--text-h1); --text-small: 0.875rem; /* ---- Spacing (8px base, guide §6) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---- Radius (guide §7.3) ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ---- Shadow — tinted with the brand hue, never neutral grey (guide §7.3). Dark surfaces swallow tinted shadows, so the dark theme falls back to near-black density instead. ---- */ --shadow-color: rgba(0, 54, 62, 0.10); --shadow-color: light-dark(rgba(0, 54, 62, 0.10), rgba(0, 0, 0, 0.55)); --shadow-color-strong: rgba(0, 54, 62, 0.16); --shadow-color-strong: light-dark(rgba(0, 54, 62, 0.16), rgba(0, 0, 0, 0.68)); --shadow-card: 0 2px 8px var(--shadow-color); --shadow-card-hover: 0 8px 24px var(--shadow-color-strong); /* ---- Transitions ---- */ --transition-fast: 150ms ease; --transition-base: 240ms ease; --transition-slow: 420ms ease; /* ---- Layout (guide §6) ---- */ --container-max: 1200px; --header-height: 4.5rem; --gutter: 1.25rem; } @media (min-width: 900px) { :root { --gutter: 5rem; } } /* Manual override written by the theme toggle; restored before first paint by the inline script in includes/layout.php. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; }