/* Somo design tokens — the single source of visual truth. * * ACCESSIBILITY: every foreground/background pair here clears WCAG AA (4.5:1), * measured rather than eyeballed. The lightness values are the LIGHTEST that * still pass — the palette stays as warm as accessibility allows and not a step * warmer. Re-measure if you change a colour: this is read on cheap screens in * Kenyan daylight, where a 3:1 caption is simply not there. * * Inherited from familyflow.pro's warm palette and adapted for study surfaces. * The target feeling is good paper and a calm teacher. Terracotta is the only * action colour; green and amber carry MARK MEANING and are never decorative. * * Imported by web/src/app/globals.css. Do not fork these values into components. */ :root { /* ── Ground & ink ───────────────────────────────────────────── */ /* THE LADDER (design 15a, third Home revision — 2026-09-03). * * The first two cuts of the signed-in Home put every block — header, hero, * table cells, footnotes — on the one page ground with hairlines between * them, and the operator's verdict was "it looks very flat". A hairline * separates; it does not lift. What lifts is a second surface level, and a * second level only reads if the ground is a hair BELOW white: at lightness * 0.988 a warm ground (the old chroma 0.008) pulls a white card toward grey * and the two collapse into each other again, which was the flatness in * question. So the ground is now near-neutral (chroma 0.004, the designer's * ceiling for keeping warm paper at all), and the app shell stands on three * steps: * * ground --paper 0.988 the page; nothing else is painted this * raised --surface white header strip, hero band, tables, strip * tinted --tint-head 0.972 a table's header row * --tint-band 0.980 group bands, live-counts footer, the AI notice * recessed --recess 0.978 the fact row — a fact, not a thing to act on * * and two hairline weights, never the same weight at two hierarchy levels: * --line encloses a block (a card's outline, a band's bottom edge, a table * header's lower edge); --line-soft divides inside one (row separators, * column seams). Shadows stay off everything but the resume pill. */ --paper: oklch(0.988 0.004 90); /* page ground — the bottom step */ --surface: #ffffff; /* raised: bands, cards, tables */ --tint-head: oklch(0.972 0.004 90); /* a table's header row */ --tint-band: oklch(0.980 0.003 90); /* group bands, table footers, the AI notice between the header and hero bands */ --recess: oklch(0.978 0.004 90); /* the fact row, sunk into paper */ --paper-alt: oklch(0.965 0.012 75); /* raised card / rail (pre-ladder pages keep it) */ --paper-deep: oklch(0.22 0.015 60); /* inverted surfaces, footer */ --ink: oklch(0.22 0.015 60); /* body text */ --ink-soft: oklch(0.45 0.012 60); /* secondary text */ --ink-faint: oklch(0.558 0.010 60); /* captions, metadata */ /* The ladder's tertiary ink — Home's eyebrows, table labels, bands, * captions, footnotes and dashes. --ink-faint on the tinted rows measures * 4.34:1 (tint-head) and 4.44:1 (tint-band), under the 4.5 this file * promises, so the ladder gets an ink a shade darker and, like the * surfaces it sits on, near-neutral: 5.08 on tint-head, 5.51 on white. * The board's lighter "dash" ink (0.60) is deliberately NOT a token: it * measures 3.6–3.9 on every surface, so a dash uses this ink too. */ --ink-tertiary: oklch(0.52 0.006 90); --ink-action: oklch(0.30 0.010 60); /* a text action that is not THE action — never terracotta */ --line: oklch(0.905 0.004 90); /* hairline enclosing a block */ --line-soft: oklch(0.945 0.004 90); /* hairline inside a block */ /* ── Action ─────────────────────────────────────────────────── */ --accent: oklch(0.570 0.13 45); /* terracotta — primary action */ --accent-hover: oklch(0.510 0.14 45); --accent-soft: oklch(0.94 0.04 45); /* tinted backgrounds */ --accent-ink: oklch(0.99 0.01 45); /* text on accent */ --link: oklch(0.470 0.13 45); /* inline link ink — darker than the action, so a link in a sentence is not a button */ /* ── Mark semantics (meaning, never decoration) ─────────────── */ --mark-earned: oklch(0.524 0.10 155); /* scheme point awarded */ --mark-earned-soft: oklch(0.95 0.03 155); --mark-partial: oklch(0.543 0.13 65); /* partially credited */ --mark-partial-soft:oklch(0.96 0.04 65); --mark-missed: oklch(0.540 0.010 60); /* not awarded — grey, not red. A missed mark is a thing to learn, not an error state. */ --mark-missed-soft: oklch(0.96 0.004 70); /* The storefront's marked answer (design boards 16a/16b/16c, 2026-09-05): * three values per mark — the ink the figure is set in, the tint the row * sits on, the line that closes it. Earned is a mark the scheme awarded. * Partial is a mark not yet earned, and amber is the ONLY treatment for * one: a missed mark reads amber too, never red, and nothing is labelled * wrong. The app's scheme rows keep the pair above until design * reconciles the two palettes; the landing page reads these. */ --mark-earned-ink: oklch(0.480 0.095 150); --mark-earned-tint: oklch(0.972 0.022 150); --mark-earned-line: oklch(0.900 0.045 150); --mark-partial-ink: oklch(0.520 0.105 75); --mark-partial-tint: oklch(0.972 0.035 85); --mark-partial-line: oklch(0.895 0.060 85); /* ── Exam-paper surface (tutor mode question pane) ──────────── */ --exam-paper: oklch(0.995 0.004 85); --exam-line: oklch(0.88 0.008 70); --exam-ink: oklch(0.18 0.012 60); /* ── Geometry ───────────────────────────────────────────────── */ --r-card: 14px; --r-table: 13px; /* the ladder's cards: tables, the pick-up strip */ --r-recess: 12px; /* the fact row — a step smaller, a step lower */ --r-hero: 22px; --r-pill: 999px; --r-input: 10px; /* ── Elevation: a whisper, never a shadow ───────────────────── */ --lift-1: 0 1px 2px oklch(0.22 0.015 60 / 0.04); --lift-2: 0 2px 8px oklch(0.22 0.015 60 / 0.06); --lift-3: 0 8px 28px oklch(0.22 0.015 60 / 0.08); /* The one shadow on the ladder: the resume pill floats over the tab bar, * and its shadow is its own colour so it reads as glow, not dirt. */ --lift-pill: 0 6px 18px -6px oklch(0.570 0.13 45 / 0.55); /* ── Type ───────────────────────────────────────────────────── */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Fluid scale. Chemistry notation needs a stable baseline, so line-heights * are set generously and sub/superscripts inherit rather than shrink twice. */ --t-display: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem); --t-h1: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem); --t-h2: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem); --t-h3: 1.125rem; --t-body: 1rem; --t-small: 0.875rem; --t-caption: 0.8125rem; /* ── Spacing rhythm (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: 3rem; --s-8: 4rem; --s-9: 6rem; /* ── Motion: present, never performative ────────────────────── */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; } /* Dark mode is deliberately deferred for the MVP: students study in daylight and * on cheap screens where our warm paper reads better than an OLED-black theme. * When it lands it redefines tokens here only — never inside components. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }