/* ============================================================ Lil Friends — design tokens Transcribed from the Lil Friends Design System (colors, fonts, typography, spacing). Cedarville Cursive is the only webfont and carries essentially all of the app's copy. It is self-hosted (see assets/fonts/) and preloaded in each page's so it is ready at first paint — avoiding the flash of fallback font that the old Google Fonts caused. ============================================================ */ @font-face { font-family: "Cedarville Cursive"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/cedarville-cursive-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Newsreader — the legal documents only (privacy/terms), which are the one place on the site with thousands of words of continuous text. One variable file covers the whole weight axis, so 400 and 600 cost a single request. Self-hosted like the cursive: no font-CDN request, so no visitor IP leaves for a third party. Loaded on those two pages, not site-wide. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/newsreader-latin-var.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- Colors ---- */ --bg: #ffffff; /* the paper */ --bg-alt: #eff2f5; /* subtle fills, icon-button blob */ --accent: #fee2a1; /* the warm yellow */ --bg-disabled: #fff1d1; /* pale yellow */ --ink: #1a1f25; /* the drawing ink */ --subtle: #a7b1be; /* placeholders, faint captions */ --muted: #6c7789; /* secondary copy */ --on-accent: #db9040; /* gold-brown lettering on yellow */ --on-disabled: #eecb8b; --on-alt: #ffffff; --paper-warm: #fff1d1; /* ---- Semantic aliases ---- */ --background-default: var(--bg); --background-alt: var(--bg-alt); --background-accent: var(--accent); --background-disabled: var(--bg-disabled); --foreground-strong: var(--ink); --foreground-default: var(--ink); --foreground-muted: var(--muted); --foreground-subtle: var(--subtle); --foreground-on-accent:var(--on-accent); --border-strong: var(--ink); --border-accent: var(--accent); --border-subtle: var(--bg-alt); /* ---- Families ---- */ --font-brand: "Cedarville Cursive", "Bradley Hand", "Segoe Script", cursive; --font-doc: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-system: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif; /* ---- Weights ---- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 600; /* ---- Type scale (1.125 modular scale, base 16 — exact transcriptions) ---- */ --text-display: 73.98px; --text-logo: 65.74px; --text-header: 46.19px; --text-title: 36.49px; --text-heading: 32.43px; --text-button: 28.83px; --text-body-lg: 25.63px; --text-body: 22.78px; --text-label: 20.25px; --text-small: 18px; --text-xsmall: 16px; --text-caption: 14.22px; --text-fine: 12px; /* ---- Line heights ---- */ --leading-display: 72px; --leading-header: 1.0; --leading-heading: 1.1; --leading-body: 1.55; --leading-tight: 1.28; /* ---- Tracking ---- */ --tracking-tight: -0.02em; --tracking-normal: 0; --cursive-line-tighten: -0.37; /* ---- Spacing ---- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-screen: 20px; /* ---- Radius (fallbacks; visible corners are hand-drawn) ---- */ --radius-sm: 5px; --radius-field: 16px; --radius-card: 20px; --radius-pill: 999px; }