/* ========================================================================== Design tokens — Sofia Barbosa Direção: papel creme, tinta grafite e acento terracota editorial. Contract: same token names as the agency workspace (do not rename). --------------------------------------------------------------------------- THEME CONTRACT (light / dark) --------------------------------------------------------------------------- Every colour token is declared with light-dark(, ) and resolved by the CSS `color-scheme` property. Consequences worth knowing: * Switching theme is a ONE-property change (`color-scheme`) — there is no second copy of the palette to keep in sync. * Following the visitor's OS preference needs NO JavaScript at all. JS only exists to remember a MANUAL override (see main.js). * Each declaration is preceded by a plain fallback value for browsers without light-dark() support. They render the light theme, which is always legible — never a broken half-applied palette. Four roles are easy to confuse because they invert differently. Using the wrong one is the single most common way to break dark mode: --color-structure an always-dark SURFACE (footer, code block, skip link). Stays dark in BOTH themes. --color-heading heading / strong foreground text. Dark on light, LIGHT on dark. Never use it as a background. --color-text-inverse text that sits ON --color-structure. Always light. --color-on-accent text that sits ON --color-accent. Inverts with the accent, because the accent lightens in dark mode. ========================================================================== */ :root { /* Allow both themes; the OS preference decides until the visitor overrides. */ color-scheme: light dark; /* Sofia Barbosa — papel, tinta e um único acento editorial */ --color-base: #f3ede2; --color-base: light-dark(#f3ede2, #171512); --color-surface: #fbf8f1; --color-surface: light-dark(#fbf8f1, #211f1b); --color-structure: #1a1a1a; --color-structure: light-dark(#1a1a1a, #100f0d); --color-heading: #1a1a1a; --color-heading: light-dark(#1a1a1a, #f3ede2); --color-accent: #a64a28; --color-accent: light-dark(#a64a28, #d98561); --color-accent-hover: #8e4024; --color-accent-hover: light-dark(#8e4024, #eda07d); --color-accent-soft: rgba(179, 85, 47, 0.09); --color-accent-soft: light-dark(rgba(179, 85, 47, 0.09), rgba(217, 133, 97, 0.14)); --color-on-accent: #fffaf1; --color-on-accent: light-dark(#fffaf1, #171512); --color-text-primary: #27231f; --color-text-primary: light-dark(#27231f, #ede6db); --color-text-secondary: #6d655c; --color-text-secondary: light-dark(#6d655c, #bdb3a8); --color-text-inverse: #f3ede2; --color-text-inverse: light-dark(#f3ede2, #f6f0e5); --color-border: #cfc4b5; --color-border: light-dark(#cfc4b5, #453e36); --color-error: #b3261e; --color-error: light-dark(#b3261e, #f2857e); --color-success: #1f7a4d; --color-success: light-dark(#1f7a4d, #5fc492); --color-draft: #7a5b1f; /* draft banner surface */ --color-draft: light-dark(#7a5b1f, #d8b256); --color-on-draft: #ffffff; --color-on-draft: light-dark(#ffffff, #17130a); /* Typography — system stacks; projects may add local/webfonts */ --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --font-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* -------------------------------------------------------------------- Type scale (fluid) -------------------------------------------------------------------- Every step interpolates between a 400px and a 1440px viewport, and the BODY steps grow too. That second half is what keeps the page harmonic: a display size that scales while body copy stays pinned at 16px produces the exact imbalance this project had (91px headline over 16px prose, a ratio above 5). The editorial steps below top out so the widest display/body ratio on any surface is ~3.6x on the hero and ~2.7x in the body of the page — large enough to lead the eye, small enough to read as one system. -------------------------------------------------------------------- */ --text-xs: 0.75rem; --text-sm: clamp(0.8125rem, 0.1vw + 0.79rem, 0.875rem); --text-base: clamp(1rem, 0.19vw + 0.95rem, 1.0625rem); /* 16 → 17 */ --text-lg: clamp(1.0625rem, 0.24vw + 1rem, 1.1875rem); /* 17 → 19 */ --text-xl: clamp(1.15rem, 0.34vw + 1.05rem, 1.3125rem); --text-2xl: clamp(1.35rem, 0.62vw + 1.15rem, 1.6rem); --text-3xl: clamp(1.65rem, 1.15vw + 1.3rem, 2.35rem); --text-4xl: clamp(2.25rem, 2.31vw + 1.65rem, 3.5rem); /* -------------------------------------------------------------------- Editorial display steps — the project's own voice -------------------------------------------------------------------- main.css consumes these instead of hand-rolling a clamp() per section, which is how the old scale drifted (six headings, six different curves, none related to the body size). Change a step here and every surface that uses it moves together. -------------------------------------------------------------------- */ --text-display: clamp(2.5rem, 2.69vw + 1.83rem, 4.25rem); /* hero h1 40 → 68 */ --text-title: clamp(1.85rem, 1.54vw + 1.49rem, 2.875rem); /* section h2 30 → 46 */ --text-subtitle: clamp(1.35rem, 0.77vw + 1.18rem, 1.875rem);/* card h3 22 → 30 */ --text-quote: clamp(1.9rem, 2.5vw + 1.13rem, 3.375rem); /* pull quote 30 → 54 */ --text-lead: clamp(1.0625rem, 0.36vw + 0.97rem, 1.25rem); /* intro copy 17 → 20 */ /* Line heights — a display line-height that works at 91px is too tight at 68px, so each step carries its own. */ --leading-display: 1.04; --leading-title: 1.1; --leading-subtitle: 1.22; --leading-quote: 1.14; --leading-body: 1.7; --leading-lead: 1.62; /* Measure — the second half of the problem. Body copy was running 74-87 characters per line under those headings; these caps hold it in the comfortable 55-68 range at every step. */ --measure-body: 63ch; --measure-lead: 54ch; --measure-narrow: 46ch; /* Spacing (8px base) */ --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 */ --radius-sm: 4px; --radius-md: 2px; --radius-lg: 4px; --radius-full: 9999px; /* Shadow — composed from a single themed colour so both themes stay in sync. Dark surfaces swallow soft shadows, so the dark value is far denser. */ --shadow-color: rgba(29, 35, 42, 0.07); --shadow-color: light-dark(rgba(29, 35, 42, 0.07), rgba(0, 0, 0, 0.5)); --shadow-color-strong: rgba(29, 35, 42, 0.12); --shadow-color-strong: light-dark(rgba(29, 35, 42, 0.12), rgba(0, 0, 0, 0.6)); --shadow-card: 0 1px 2px var(--shadow-color), 0 8px 24px var(--shadow-color); --shadow-card-hover: 0 2px 4px var(--shadow-color-strong), 0 14px 34px var(--shadow-color-strong); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 240ms ease; --transition-slow: 420ms ease; /* Layout */ --container-max: 1240px; --header-height: 5.25rem; } /* Manual override, written by the theme toggle and restored before first paint by the inline script in includes/layout.php. Setting color-scheme is all it takes — every light-dark() token above follows. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; }