/* ========================================================================== Little Reads — Webfonts -------------------------------------------------------------------------- Brand face is FS Me (Fontsmith), Regular 400 / Bold 700 only — licensed (Fontsmith order FS213367). ONE family at two weights; never a family per weight. Where FS Me cannot be loaded (an external design tool without the webfont), the stack falls back to system humanist sans and the design holds — Marketing/design-system.md line 166. PATHS ARE '../fonts/' AND MUST STAY THAT WAY. This file is consumed from two directories at once and the src text is shared between them: from this system it resolves tokens/ -> fonts/, and from the backend's vendored concatenation it resolves public/assets/css/ -> public/assets/fonts/, which is where the licensed files already live (and what the legacy style.css already uses). 'assets/fonts/' works here but 404s there. ========================================================================== */ @font-face { font-family: 'FS Me'; src: url('../fonts/fsme-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'FS Me'; src: url('../fonts/fsme-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-sans: "FS Me", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; } /* ========================================================================== Little Reads — Colour -------------------------------------------------------------------------- Colour = the element's ROLE, not whether it is tappable. · CTA orange → a commitment threshold (sign-up / trial / subscribe / gate) · Action blue → an action inside what the user already has (continue / save / filter) · Informational → tags / "you are here" / status — never a click affordance No pink/coral anywhere. No gradients. ========================================================================== */ :root { /* ---- Base palette ---- */ --colour-text: #003430; /* deep teal — ALL text */ --colour-informational: #5AAF96; /* mint — tags, status, "you are here" */ --colour-action: #6478A5; /* blue — no-commitment actions */ --colour-action-hover: #54678F; --colour-cta: #EB9664; /* orange — commitment actions */ --colour-reading: #5AAF96; /* the 'Reading' section identity (Currently Reading hero chip + dots) — MINT, alias of --colour-informational (FINAL, Hannah + James, 4 Jul 2026: ALL status chips are mint). Kept as its own token so a re-assignment stays one line. */ --colour-recommended: #5AAF96; /* the 'Recommended' marker (chip + cover frame + distilled rail thumb) — MINT, alias of --colour-informational (FINAL, Hannah + James, 4 Jul 2026; the eliminated alternatives are recorded in uploads/DESIGN.md line 26). The ONLY grid marker — markers exist for DISCOVERY. Status only, never a click affordance. Kept as its own token so a re-assignment stays one line. */ --colour-cta-hover: #D88451; --colour-error: #C8553D; --surface-white: #FFFFFF; --surface-cell: #F6FAF9; /* barely-mint off-white */ --surface-tint-info: #E8F2EE; /* tag / chip fill */ --text-secondary: #6E7C77; --text-disabled: #A6B3AE; --border-subtle: #D8E5DF; /* ---- Semantic aliases ---- */ --text-primary: var(--colour-text); --text-on-action: var(--surface-white); --text-on-cta: var(--surface-white); --text-link: var(--colour-action); --surface-page: var(--surface-cell); --surface-card: var(--surface-white); --surface-raised: var(--surface-white); --border-default: var(--border-subtle); --focus-ring: var(--colour-action); /* ---- Chart series (JourneyFunnel round, ratified James + Hannah 16 Aug 2026) ---- Data ink for admin charts ONLY — never a chip, a border, a button, or a reading-app surface. Two series, each with one emphasis shade (same hue, darker) for the step that is the point of the funnel. A third series is a new conversation, not a value quietly added here. Never action blue as data ink; never CTA orange on an admin surface. */ --chart-series-1: var(--colour-informational); /* mint #5AAF96 — the spine */ --chart-series-1-emphasis: #2F7F68; /* the fork step (signed up) */ --chart-series-2: #C382AF; /* brand plum — ASSIGNED: data-series ink (⚖️ James, 20 Aug 2026; ratified on sight in the 16 Aug data-family round) — the branches */ --chart-series-2-emphasis: #82486F; /* Subscribed */ --chart-track: var(--surface-cell); /* the track behind every bar — the same off-white DistributionChart already uses */ /* SignalCard (ratified 16 Aug 2026) names the same series by these names — aliases, one source. */ --colour-series-1: var(--chart-series-1); --colour-series-2: var(--chart-series-2); --colour-series-2-emphasis: var(--chart-series-2-emphasis); --status-info: var(--colour-informational); --status-error: var(--colour-error); } /* ========================================================================== Little Reads — Typography -------------------------------------------------------------------------- FS Me. Regular 400 / Bold 700 only. No italic, no medium. Hierarchy = weight + size. Book/work titles go in "double quotes", never italic. No all-caps body (small Label/badge only). Type scale is "size / line-height". Mobile + desktop sizes both provided. ========================================================================== */ :root { /* --font-sans is declared in fonts.css — its single home. Declaring it here too would win the cascade (fonts.css is concatenated first) and silently undo it. */ --font-family-base: var(--font-sans); --font-weight-regular: 400; --font-weight-bold: 700; /* ---- Display ---- */ --font-display-size: 56px; --font-display-line: 64px; --font-display-size-mobile: 40px; --font-display-line-mobile: 48px; /* ---- H1 ---- */ --font-h1-size: 40px; --font-h1-line: 48px; --font-h1-size-mobile: 32px; --font-h1-line-mobile: 40px; /* ---- H2 ---- */ --font-h2-size: 28px; --font-h2-line: 36px; --font-h2-size-mobile: 24px; --font-h2-line-mobile: 32px; /* ---- H3 ---- */ --font-h3-size: 22px; --font-h3-line: 30px; --font-h3-size-mobile: 20px; --font-h3-line-mobile: 28px; /* ---- Body ---- */ --font-body-size: 16px; --font-body-line: 26px; /* ---- Small ---- */ --font-small-size: 14px; --font-small-line: 20px; /* ---- Label (bold; the only place caps are allowed, sparingly) ---- */ --font-label-size: 13px; --font-label-line: 20px; --font-label-weight: var(--font-weight-bold); } /* ========================================================================== Little Reads — Spacing (8px grid) -------------------------------------------------------------------------- Pick a token, never a raw value. Generous, calm spacing. ========================================================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Common touch / layout helpers */ --touch-min: 44px; /* minimum hit target */ } /* ========================================================================== Little Reads — Radius -------------------------------------------------------------------------- Rounded everything; no sharp 90° corners anywhere. ========================================================================== */ :root { /* ONE degree of rounding — every ELEMENT corner is --radius-md (12px). Ratified James, 01 Jul 2026. The old sm/lg/xl/pill scale produced five different roundings across one app ("bled in") and is removed. --radius-pill remains ONLY for pure round shapes: circles (avatar/icon dots) and scroll-bar thumbs — never an element corner. Do NOT re-add a scale. */ --radius-md: 12px; --radius-pill: 999px; /* circles + scroll-caps ONLY, never element corners */ } /* ========================================================================== Little Reads — Elevation -------------------------------------------------------------------------- Tinted teal shadows, NEVER black. Three levels only — no level 4. 1 → cards · 2 → dropdowns/menus · 3 → modals/dialogs ========================================================================== */ :root { --shadow-1: 0 1px 2px rgba(0, 52, 48, 0.04), 0 4px 12px rgba(0, 52, 48, 0.04); --shadow-2: 0 2px 6px rgba(0, 52, 48, 0.06), 0 12px 24px rgba(0, 52, 48, 0.08); /* restored to the brand recipe (⚖️ 20 Aug 2026 — web-only drift; native already carried it) */ --shadow-3: 0 8px 24px rgba(0, 52, 48, 0.10), 0 24px 48px rgba(0, 52, 48, 0.12); /* restored to the brand recipe (⚖️ 20 Aug 2026) */ /* Focus ring (2px action-blue) */ --ring-focus: 0 0 0 2px var(--surface-white), 0 0 0 4px var(--colour-action); } /* ========================================================================== Little Reads — Motion -------------------------------------------------------------------------- Calm and quick. 150ms hover / 250ms overlays, ease-out. Respect reduced-motion. No bounces, no whimsical spring. Hover = colour shift; press = subtle scale. ========================================================================== */ :root { --motion-hover: 150ms; /* @kind other */ --motion-overlay: 250ms; /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* the system's own exit curve (⚖️ ratified 20 Aug 2026) — NOT the CSS `ease-out` keyword this name shadows; both apps mirror this exact curve (LRTheme Motion) */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --press-scale: 0.97; /* ⚖️ ratified 20 Aug 2026 — the one truth (shipped on both apps + web; the brand doc's 0.98 prose adopted this) */ } @media (prefers-reduced-motion: reduce) { :root { --motion-hover: 0ms; /* @kind other */ --motion-overlay: 0ms; /* @kind other */ --press-scale: 1; /* @kind other */ } }