/* Nidodo: the geboortekaartje world, as a brand layer over Veneer tokens. * * Two voices, each in its own place: * the card (things you would hold: the birth card, the reply card, the * paused card): washed watercolour paper from real scans, the * hand-written face, and hand-painted watercolour charms; * the app (things you operate: lists, forms, buttons, headings): flat * pastel stock, Figtree, Veneer controls. * Every page is one warm table (like a desk under a card); the parents' * pastel stock (never by gender) colours only the card, the primary button * and a list's dot. Ink is cocoa like the paintings' line work; ochre is the * one painted accent. Light is the default; a device may choose dark (one * latte evening for every stock). Values: UX consensus of 2026-10-10, * R&D/decisions/2026-10-10-visual-base-ux-consensus.md. * Nothing in CSS imitates paper, paint or relief: texture comes from real * CC0 paper scans (vendor/textures), painting from real illustrations. * * Set the stock with data-stock on any ancestor: cream | apricot | maize | sage | sky. */ /* Light unless the device chose dark (theme-boot.js sets data-theme). The system setting is not followed: the first impression is the cream card. */ :root { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } [data-veneer-theme='nidodo'] { --nl-h: 65; --nl-c: 0.026; --nl-card-l: 0.885; } /* Every stock sets all of its values, because custom properties inherit: * a swatch nested in another stock must not borrow that stock's values. * One pastel family: lightness 0.885 (vanilla 0.895, or it reads as cream), * chroma at least 0.028 except cream, the neutral one. */ [data-stock='cream'] { --nl-h: 65; --nl-c: 0.026; --nl-card-l: 0.885; } [data-stock='apricot'] { --nl-h: 30; --nl-c: 0.045; --nl-card-l: 0.885; } [data-stock='maize'] { --nl-h: 95; --nl-c: 0.055; --nl-card-l: 0.895; } [data-stock='sage'] { --nl-h: 145; --nl-c: 0.032; --nl-card-l: 0.885; } [data-stock='sky'] { --nl-h: 235; --nl-c: 0.03; --nl-card-l: 0.885; } [data-veneer-theme='nidodo'], [data-veneer-theme='nidodo'] [data-stock] { /* The table: every page, every stock. Dark is a deep latte evening * (owner, 2026-10-11: L 0.16, much darker than the consensus' 0.34). */ --nl-table: light-dark(oklch(0.955 0.008 75), oklch(0.16 0.012 55)); --nl-table-ink: light-dark(oklch(0.3 0.035 50), oklch(0.93 0.015 72)); /* The page and its surfaces sit on the table, the same for every stock; * the stock lives on the card (--nl-card). The names are kept from when * the whole page took the stock, so components need not change. */ --nl-stock: var(--nl-table); --nl-stock-lift: light-dark(oklch(0.975 0.006 75), oklch(0.205 0.014 55)); --nl-stock-sunk: light-dark(oklch(0.925 0.016 70), oklch(0.245 0.016 55)); --nl-stock-edge: light-dark(oklch(0.84 0.02 60), oklch(0.32 0.018 55)); /* The card: the stock in light (a shade deeper than the table), latte in * dark (a shade lighter than the deep table, or it would sink into it), * with a thin printed line in its own colour. */ --nl-card: light-dark(oklch(var(--nl-card-l) var(--nl-c) var(--nl-h)), oklch(0.235 0.018 55)); --nl-card-line: light-dark(oklch(0.708 0.046 56 / 0.5), oklch(0.65 var(--nl-c) var(--nl-h))); /* Cocoa ink for type, matching the paintings' line work; secondary ink is * tinted by the stock so it never turns grey. */ --nl-ink: var(--nl-table-ink); --nl-ink-soft: light-dark(oklch(0.47 0.028 52), oklch(0.78 0.018 68)); /* The primary button: the stock's own hue, deeper and a little richer in * light (lightness 0.78, chroma x1.4; cream lands on the owner's #C9B6A8), * light in dark, always with cocoa text (about 6.8:1). On the table the * button itself is about 1.8:1; its label identifies it (WCAG 1.4.11). */ --nl-action: light-dark(oklch(0.78 calc(var(--nl-c) * 1.4) var(--nl-h)), oklch(0.86 var(--nl-c) var(--nl-h))); --nl-on-action: light-dark(oklch(0.3 0.035 50), oklch(0.28 0.03 50)); /* Ochre, sampled from the watercolours: the one painted accent in UI marks. */ /* Deep enough for 3:1 on every card in light (the ampersand is large text). */ --nl-paint: light-dark(oklch(0.58 0.13 64), oklch(0.72 0.14 70)); --nl-paint-deep: light-dark(oklch(0.52 0.11 56), oklch(0.68 0.12 66)); /* A printed hairline rule. */ --nl-rule: inset 0 1px 0 var(--nl-stock-edge); --nl-card-shadow: 0 1px 1px light-dark(oklch(0.45 0.03 55 / 0.12), oklch(0 0 0 / 0.35)), 0 6px 18px light-dark(oklch(0.45 0.03 55 / 0.14), oklch(0 0 0 / 0.4)); /* The card's hand-written voice, and the app's voice. */ /* Picture-book lettering with swash capitals, for the names only. */ --nl-font-hand: 'Delius Swash Caps', 'Figtree', system-ui, sans-serif; --nl-font-display: 'Figtree', system-ui, sans-serif; --nl-font-body: 'Figtree', system-ui, sans-serif; /* Veneer reads these. */ --vnr-color-accent: var(--nl-action); --vnr-color-accent-muted: var(--nl-stock-sunk); --vnr-color-on-accent: var(--nl-on-action); --vnr-color-text-accent: var(--nl-ink); --vnr-color-icon-accent: var(--nl-ink); --vnr-color-background-body: var(--nl-stock); --vnr-color-background-card: var(--nl-stock-lift); --vnr-color-background-surface: var(--nl-stock-lift); --vnr-color-background-muted: var(--nl-stock-sunk); --vnr-color-text-primary: var(--nl-ink); --vnr-color-text-secondary: var(--nl-ink-soft); --vnr-color-border: var(--nl-stock-edge); --vnr-color-border-emphasized: var(--nl-ink-soft); /* Comfortable tap targets: guests include grandparents (>= 44px). */ --vnr-size-element-md: 44px; --vnr-size-element-lg: 52px; /* Focus ring in ink, never the action colour on the action colour. */ --vnr-color-focus-ring: var(--nl-ink); --vnr-radius-element: 10px; --vnr-radius-container: 14px; --vnr-font-family-body: var(--nl-font-body); --vnr-font-family-heading: var(--nl-font-display); } /* Veneer sets these per element, so they need a theme-scoped selector. */ [data-veneer-theme='nidodo'] veneer-progress-bar { --vnr-progress-bar-fill-accent: var(--nl-ink); --vnr-progress-bar-track: var(--nl-stock-sunk); }