/* ============================================================================ HeartFelt Kids Studio - design tokens Single source of truth for color, type scale and spacing. Every other stylesheet consumes these custom properties. Change a brand value here, once, and it propagates everywhere. CONTRAST Every ratio below was computed, not eyeballed. Target is WCAG 2.2 AA: 4.5:1 for text under 24px (or under 19px bold), 3:1 for large text, icons and UI component boundaries. Colors are split into DECORATIVE and TEXT variants on purpose. The bright brand orange and teal from Rick's artwork are beautiful as fills but do NOT carry small text at AA, so each has a darker sibling that does. Reaching for the decorative value for body copy is the mistake this split exists to stop. ============================================================================ */ :root { /* --- Neutrals ---------------------------------------------------------- ink on white 15.87 PASS all sizes (body + headings) ink-muted on white 7.05 PASS all sizes (secondary copy) ink-muted on surface-2 6.61 PASS all sizes line on white 1.27 DECORATIVE ONLY - hairlines, never text */ --ink: #10233A; --ink-muted: #4A5A6E; --white: #FFFFFF; --surface: #FFFFFF; /* white content sections, per artwork */ --surface-2: #F5F8FB; /* alternating band */ --line: #DCE5EE; --line-strong: #B9C7D6; /* 2.2:1 - use where a border must be visible */ /* --- Dark cinematic hero ---------------------------------------------- white on hero 17.57 PASS all sizes hero-dim on hero 11.41 PASS all sizes (supporting paragraph) yellow on hero 11.18 PASS all sizes (headline accent line) */ --hero-bg: #0A1A2B; --hero-bg-2: #132C45; /* gradient partner, still >= 12:1 behind white */ --hero-dim: #C4D2E0; /* --- Orange (primary action) ------------------------------------------- orange on white 3.06 FAIL small text - DECORATIVE ONLY white on orange 3.06 FAIL - do not put white text on it ink on orange 5.18 PASS (fallback if bright fill is needed) orange-text on white 5.39 PASS all sizes orange-text on peach 4.73 PASS all sizes white on orange-btn 4.73 PASS all sizes NOTE / DEVIATION FROM ARTWORK: the artwork's primary request button is white text on the bright #F26A21. That pairing measures 3.06:1 and fails AA, so buttons use --orange-btn, a slightly deeper orange that keeps the same hue family and reads identically at a glance. Flagged for Rick. */ --orange: #F26A21; /* fills, icons, large display only */ --orange-btn: #C9490F; /* button background, carries white text */ --orange-btn-hi: #B8450C; /* hover / active */ --orange-text: #B8450C; /* links and small text on light surfaces */ /* --- Blue -------------------------------------------------------------- blue on white 6.44 PASS all sizes white on blue 6.44 PASS all sizes blue-light on white 3.67 large text and UI borders only blue on tint-blue 5.68 PASS all sizes */ --blue: #0B5FAE; --blue-light: #2E8AD6; /* decorative / large only */ /* --- Teal -------------------------------------------------------------- teal on white 3.12 DECORATIVE ONLY teal-text on white 6.45 PASS all sizes teal-text on tint-teal 5.73 PASS all sizes */ --teal: #17A398; /* fills and icons only */ --teal-text: #0C6A62; /* --- Yellow ------------------------------------------------------------ yellow on hero 11.18 PASS (hero headline accent) ink on yellow 10.10 PASS (dark text on a yellow chip) yellow-text on white 5.02 PASS all sizes yellow-text on tint-yellow 4.54 PASS all sizes */ --yellow: #FFC629; --yellow-text: #8A6B00; /* --- Card tints (rounded category cards in the artwork) ---------------- ink on every tint below measures 13.9 - 14.4. All safe for body copy. */ --tint-peach: #FDEDE6; --tint-teal: #E4F5F3; --tint-yellow: #FDF3DA; --tint-blue: #E8F2FC; /* --- Placeholder marker ------------------------------------------------ Rick requires temporary content to be clearly identified. Placeholders get this yellow flag treatment so nothing unfinished can be mistaken for approved copy in a review, and so a grep for the class finds them all. ph-ink on ph-bg 4.92 PASS all sizes */ --ph-bg: #FFF6D8; --ph-ink: #7A6A3A; --ph-line: #C9AE58; /* --- Status ------------------------------------------------------------ */ --ok: #0C6A62; --warn-bg: #FFF6D8; /* --- Type -------------------------------------------------------------- Poppins is the closest widely available match to the rounded geometric display face in the artwork. It is loaded from Google Fonts in these mockups only; the production theme will self-host it so the site does not depend on a third party at render time. Confirm the face before build. */ --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Fluid scale. Minimum body size is 16px; nothing drops below 14px. */ --t-hero: clamp(2.25rem, 1.35rem + 3.1vw, 3.5rem); --t-h1: clamp(1.9rem, 1.35rem + 2.1vw, 2.85rem); --t-h2: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); --t-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); --t-h4: 1.0625rem; --t-body: 1rem; --t-small: 0.9375rem; --t-micro: 0.8125rem; /* 13px - labels and tags only, never a sentence */ --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.65; /* --- Spacing (4px base) ------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; /* --- Shape and depth --------------------------------------------------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(16,35,58,.06), 0 2px 8px rgba(16,35,58,.05); --shadow-2: 0 2px 6px rgba(16,35,58,.07), 0 12px 28px rgba(16,35,58,.09); /* --- Layout ------------------------------------------------------------ */ --wrap: 1140px; --wrap-wide: 1280px; --wrap-text: 68ch; /* measure cap for long-form reading */ /* Visible focus ring. 3:1 against both white and the dark hero. */ --focus: #1D7FE0; }