/* ============================================================ RAISED TO RESIST · Activity Books — TOKENS ------------------------------------------------------------ Shared by every packet. The warm, kid-facing sub-brand: cream paper, charcoal text, a warm-gray diagonal watermark, the six locked pillar colors, Lora + Poppins, US Letter. Soft rounded corners and gentle pillar tints — friendly, not the neubrutalist master surface. Load order in every book : tokens.css → pages.css → bookN.css → js/tweaks.js ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap'); :root { /* === FONTS — Lora (serif headings/accents) · Poppins (body) === */ --font-serif: 'Lora', 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-sans: 'Poppins', 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* === PAPER ==================================================== */ --cream: #FFF8F0; /* interior + cover background */ --cream-deep: #F6EDDF; --kraft: #E8D8B6; /* === INK / TEXT (charcoal, warm-gray for muted) ============== */ --ink: #2D2D2D; /* body + line-art + titles */ --ink-soft: #44423E; --ink-mute: #8C8279; /* footer, captions, watermark (warm gray) */ --ink-faint: #B7AFA2; /* === SIX LOCKED PILLAR COLORS ================================ */ --pillar-empathy: #6B8F71; /* sage · Genuine Empathy */ --pillar-media: #2A6B6B; /* teal · Media Literacy */ --pillar-civic: #D4A843; /* gold · Civic Learning */ --pillar-digital: #C1553B; /* rust · Digital Wellness */ --pillar-community: #8C8279; /* warm gray · Community Advocacy */ --pillar-body: #C4918E; /* rose · Body Safety & Consent */ /* default pillar (overridden per page via [data-pillar]) */ --pillar: var(--pillar-media); /* === PRINT GEOMETRY — US Letter portrait ==================== */ --page-w: 8.5in; --page-h: 11in; --page-margin: 0.6in; --page-inner: 7.3in; /* === SPACING (4px baseline) ================================= */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* === RADII — soft + friendly (kid sub-brand) =============== */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; /* === SHADOWS — soft only (screen); never in print ========== */ --shadow-page: 0 12px 44px rgba(45,45,45,0.16); --shadow-soft: 0 4px 16px rgba(45,45,45,0.10); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ PILLAR BINDING — set [data-pillar] (usually on .page). Binds --pillar plus the 8 / 16 / 30 % tint helpers used by ribbons, panels, badges, and cards. ============================================================ */ [data-pillar="empathy"] { --pillar: var(--pillar-empathy); } [data-pillar="media"] { --pillar: var(--pillar-media); } [data-pillar="civic"] { --pillar: var(--pillar-civic); } [data-pillar="digital"] { --pillar: var(--pillar-digital); } [data-pillar="community"] { --pillar: var(--pillar-community); } [data-pillar="body"] { --pillar: var(--pillar-body); } [data-pillar] { --pillar-8: color-mix(in srgb, var(--pillar) 8%, var(--cream)); --pillar-16: color-mix(in srgb, var(--pillar) 16%, var(--cream)); --pillar-30: color-mix(in srgb, var(--pillar) 30%, var(--cream)); --pillar-bd: color-mix(in srgb, var(--pillar) 42%, var(--cream)); /* soft border */ --pillar-ink: color-mix(in srgb, var(--pillar) 78%, var(--ink)); /* readable text */ }