/* * Loving Spain Life — design tokens * * Everything visual resolves to a variable in this file. Nothing else in the * theme should contain a raw hex value or a raw font size. * * The accent is the only token that changes per post. It is burgundy by * default (Spain) and overridden to green on Portugal posts, via the * lsl-country-* class added to in functions.php. */ :root { /* Paper — three warm surfaces, lightest to deepest */ --lsl-paper: #fffdf9; --lsl-paper-warm: #faf6ee; --lsl-paper-cream: #f5ece0; /* Ink — warm near-blacks, never blue */ --lsl-ink: #2b2724; --lsl-ink-soft: #4a423c; --lsl-ink-muted: #756a5f; /* WCAG AA on paper (5.19), warm (4.89) and cream (4.51) */ /* Accent — Spain default. Overridden per country below. */ --lsl-accent: #8f2d3f; --lsl-accent-deep: #6b1f2e; --lsl-accent-tint: #d9b8bd; /* Fixed — do not vary by country */ --lsl-ochre: #e0a02e; --lsl-border: #e3d9c9; --lsl-border-soft: #efe7d9; /* The callout wash stays cream for both countries. A cool wash on Portugal posts reads as a different site rather than a different section — only the border strip changes. */ --lsl-wash: var(--lsl-paper-cream); /* Type */ --lsl-font-display: 'Prata', Georgia, 'Times New Roman', serif; --lsl-font-body: 'Poppins', system-ui, -apple-system, sans-serif; /* Six steps, down from the eleven the Elementor kit was using. Headings scale with the viewport; body copy does not. */ --lsl-size-xs: 0.75rem; --lsl-size-sm: 0.875rem; --lsl-size-base: 1rem; --lsl-size-lg: 1.25rem; --lsl-size-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); --lsl-size-2xl: clamp(2rem, 1.4rem + 2.6vw, 3rem); --lsl-leading-tight: 1.22; --lsl-leading-body: 1.75; /* Spacing — a 4px base, only the steps actually used */ --lsl-space-1: 0.25rem; --lsl-space-2: 0.5rem; --lsl-space-3: 0.75rem; --lsl-space-4: 1rem; --lsl-space-6: 1.5rem; --lsl-space-8: 2rem; --lsl-space-12: 3rem; --lsl-space-16: 4rem; /* Structure */ --lsl-measure: 68ch; --lsl-container: 1440px; /* header and hero — the full-width band */ --lsl-content-max: 1180px; /* everything below it — the contained column */ --lsl-article-max: 1040px; --lsl-rail: 190px; /* the TOC annotation in the left margin */ --lsl-content-col: 660px; /* the reading column — centred on the page. Sized so both grid side-tracks stay >= the rail; wider and the left track jams at 190px while the right shrinks, off-centring it. */ --lsl-radius: 8px; --lsl-radius-lg: 12px; --lsl-rule: 2px; } /* * Portugal. Only the accent family moves — paper, ink, type and spacing are * shared, which is what keeps this one site rather than two. */ body.lsl-country-portugal { --lsl-accent: #2c5340; --lsl-accent-deep: #1f3d2e; --lsl-accent-tint: #b4c7ba; } /* * Spain is the default, but name it explicitly too so the intent is legible * and a future third country has an obvious pattern to follow. */ body.lsl-country-spain { --lsl-accent: #8f2d3f; --lsl-accent-deep: #6b1f2e; --lsl-accent-tint: #d9b8bd; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }