/* Seedling — look tokens, v4. A look of Ember, not a fork. Same token NAMES as ../ember/css/tokens.css (the sibling ember skill); only values change. Loads after ../ember/css/base-tokens.css (space, sizes, layout, layers, text scale, statuses, chart defaults, aliases and the neutral formulas). Then ../ember/palettes/

.css (optional), reset.css, components.css, seedling.css. Two modes. The default is PER APP (), not per look: most Seedling apps are dark-first, mead's public page is light-first. Dark is the CSS fallback (`:root, [data-theme="dark"]`); light is `[data-theme="light"]`. dark = moss stone at night: the v3 look, lifted a step so it reads softer. light = the herbarium: sage board (canvas) with paper sheets (surfaces) mounted on it, inked in dark moss. Neutrals: base-tokens.css builds every surface, border and text colour as oklch(--n-, --tint-chroma * --k-, --tint-hue). The tint is moss (hue 148); a palette changes the two --tint-* numbers and every neutral follows. The colour decision (accent study: ../study/accent-study.html): - Greens are the GROUND: moss-stone surfaces, borders, text tint, ornaments. - The accent is CLAY (the pot the plant sits in), in three roles: text --color-ember (links, ink labels, focus), fill --color-accent-fill (+ -hover, with --color-on-accent on top: primary button, marks via --color-accent-mark) and wash --color-ember-muted. Dark: terracotta #DA7134 for both text and fill. Light: text = dark brown clay ink #5A2800 (hue 52), fired dark enough to clear the light statuses (see below); fill = terracotta #A55946 with white; wash = sand #FCE5D3. It is still the only interactive colour; --color-ember keeps its name. These defaults are the `garden` palette's values (../ember/palettes/garden.css); keep the two in sync. - The six statuses keep the shared values per mode (idle re-tinted to moss grey), so ok-green means "healthy" in every app and never "clickable". - Clay's nearest status is danger. OKLab dE (x100) normal / deuteranopia / protanopia: dark 10.6 / 7.4 / 8.5, light 17.3 / 13.8 / 7.2 (30 deg of hue away). Light terracotta as TEXT on paper is boxed in by the light warn and ok, so the light text ink is darker; terracotta returns as the fill (always labelled, dE 11 from danger). Shape + word carry the meaning as always, and clay never fills or tints a status. Contrast figures are WCAG 2.x ratios against --color-bg-surface unless noted. Hex in comments = what the oklch() step renders to. */ :root { /* ---- tint (moss) — a palette may override both numbers ---- */ --tint-hue: 148; --tint-chroma: 0.02; /* ---- typography ---- Young Serif = identity (page, card and modal titles, brand, empty-state headlines): a soft seed-packet serif, one weight, kept at 16px+ on the px display scale like Ember. Nunito Sans = body: soft humanist sans, variable 400-600, real tabular figures (tables, stats and clocks stay aligned via tabular-nums). IBM Plex Mono = --font-mono only: code, pre, .code, .input--mono. */ --font-display: "Young Serif", Georgia, serif; --font-body: "Nunito Sans", "Nunito Sans Fallback", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; /* text scale: ../ember/css/base-tokens.css */ --font-size-display-md: 16px; --font-size-display-lg: 20px; --font-size-display-xl: 26px; /* Ember 24: the serif's smaller x-height */ --font-size-display-2xl: 34px; --font-weight-regular: 400; --font-weight-medium: 560; /* Nunito is variable; its 500 barely differs from 400 */ --font-weight-bold: 600; --line-height-tight: 1.2; --letter-spacing-normal: 0; --letter-spacing-wide: 0.06em; /* uppercase micro labels only */ --letter-spacing-display: -0.01em; /* serif titles sit tight; Ember spaces its pixel face */ /* ---- radius (soft: river pebbles, not pixels) ---- */ --radius-none: 0; --radius-sm: 4px; /* pills, chips, checkboxes */ --radius-md: 7px; /* buttons, inputs, tabs */ --radius-lg: 12px; /* panels, cards, modals */ --radius-full: 999px; --shadow-focus-ring: 0 0 0 2px var(--color-bg-canvas), 0 0 0 4px var(--color-focus); /* ---- motion — unhurried, smooth; things grow, they don't blink ---- */ --duration-instant: 80ms; --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 360ms; --duration-flame: 600ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-step: cubic-bezier(0.2, 0, 0, 1); /* Ember: steps(1) */ --ease-blink: cubic-bezier(0.45, 0, 0.55, 1); /* pulse + busy: a slow breath (Ember: steps(2, jump-none)) */ --ease-sweep: cubic-bezier(0.45, 0, 0.55, 1); /* indeterminate meter (Ember: steps(8, end)) */ } /* ==================================================================== */ /* Dark — moss stone at night (CSS fallback) */ /* ==================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; /* ---- background (moss stone, darkest to lightest) ---- */ --n-bg-canvas: 0.158; --k-bg-canvas: 0.7; /* #090F09 page (v3 #070C08) */ --n-bg-surface: 0.2; --k-bg-surface: 0.9; /* #111811 panels, cards, tables (v3 #0E1610) */ --n-bg-raised: 0.24; --k-bg-raised: 1.05; /* #19221A sidebar, header, popovers, hover fills (v3 #162018) */ --n-bg-sunken: 0.132; --k-bg-sunken: 0.6; /* #050905 recessed wells, code */ --n-bg-overlay: 0.11; --k-bg-overlay: 0.5; /* modal scrim, 75% */ /* ---- border ---- */ --n-border-subtle: 0.262; --k-border-subtle: 0.95; /* #1E271F dividers inside a surface */ --n-border-default: 0.33; --k-border-default: 1.3; /* #2C392E surface edges */ --n-border-strong: 0.42; --k-border-strong: 1.55; /* #425244 hover, floating surfaces */ --n-border-control: 0.575; --k-border-control: 1.7; /* #6C7F6E form-control edges: 4.5 canvas / 4.2 surface / 3.8 raised (WCAG 1.4.11) */ /* ---- text (pale sage parchment, never pure white) ---- */ --n-text-primary: 0.945; --k-text-primary: 0.7; /* #E7F0E8 15.4:1 (14.0 on raised) */ --n-text-secondary: 0.805; --k-text-secondary: 1.25; /* #B5C4B6 9.9:1 (9.0 on raised) — labels, metadata */ --n-text-tertiary: 0.685; --k-text-tertiary: 1.5; /* #8E9F90 6.5:1 (5.9 on raised) — hints, placeholders */ --n-text-disabled: 0.49; --k-text-disabled: 1.25; /* #576559 3.1:1 on canvas, 2.9 surface; disabled only (WCAG-exempt) */ --n-text-inverse: 0.155; --k-text-inverse: 0.4; /* #0A0D0A on status fills: 7.1 on danger */ /* ---- accent — clay, the ONLY interactive colour ---- Token names stay "ember" so components.css is shared unchanged. */ --color-ember: #DA7134; /* 5.5:1 (5.0 on raised, 4.7 on its muted) */ --color-ember-bright: #F0995B; /* 8.1:1 — hover and active text */ --color-ember-muted: #3A1E11; /* wash: pale active fill */ --color-accent-fill: var(--color-ember); /* dark: the fill is the accent itself */ --color-accent-fill-hover: var(--color-ember-bright); --color-on-accent: #0A0D0A; /* on clay fills: 6.0:1 on clay, 8.8 on bright */ --color-focus: var(--color-ember); /* 5.9:1 on canvas */ --color-selection: rgba(218, 113, 52, 0.32); --color-link-underline: rgba(218, 113, 52, 0.45); /* chart slots: palette "garden"'s dark set (../ember/palettes/garden.css), chart-1 = clay */ --color-chart-1: #DA7134; /* oklch(0.66 0.150 48) */ --color-chart-2: #7787F3; /* oklch(0.66 0.160 275) */ --color-chart-3: #74E0D9; /* oklch(0.84 0.101 190) */ --color-chart-4: #D1D343; /* oklch(0.84 0.160 110) */ --color-chart-5: #0F9293; /* oklch(0.60 0.100 196) */ --color-chart-6: #B6AAFF; /* oklch(0.78 0.120 290) */ --color-chart-7: #48B7BD; /* oklch(0.72 0.100 200) */ --color-chart-8: #A9C37B; /* oklch(0.78 0.100 125) */ /* ---- status ---- ok, info, warn, danger, quarantine (+ -muted), the hazard pattern and the aliases come from ../ember/css/base-tokens.css, so a state reads the same in every look. Only idle is re-tinted to moss grey. */ --color-idle: #97A092; /* dormant, stopped, unknown — moss grey 5.7:1 on muted, 6.7 on surface (base: #8B91A7) */ --color-idle-muted: #1F2720; /* ---- shadow — soft, offset downward; leaf-shade, not a hard drop ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 36px -6px rgba(0, 0, 0, 0.6); /* Clickable hover: clay hairline + a neutral, offset, soft lift (no coloured glow). */ --shadow-glow-ember: 0 0 0 1px var(--color-ember), 0 8px 20px -8px rgba(0, 0, 0, 0.7); /* ---- ornaments (seedling.css) ---- */ --orn-leaf: var(--color-border-strong); /* pressed leaf at the end of a section rule */ --orn-sprout: var(--color-text-tertiary); /* empty-state seedling */ --orn-crimp: color-mix(in oklab, var(--color-border-default) 70%, transparent); /* seed-packet crimp lines */ --orn-crimp-ground: var(--color-bg-raised); /* flap: a soft step up, not a black band */ } /* ==================================================================== */ /* Light — the herbarium: paper sheets on a sage board */ /* ==================================================================== */ [data-theme="light"] { color-scheme: light; /* ---- background: canvas is the board, surfaces are the sheets ---- */ --n-bg-canvas: 0.94; --k-bg-canvas: 0.5; /* #E7EDE7 sage board (page), a visible step below the sheets */ --n-bg-surface: 0.99; --k-bg-surface: 0.2; /* #FAFCFA paper sheet: panels, cards, tables */ --n-bg-raised: 0.972; --k-bg-raised: 0.35; /* #F3F7F3 header, sidebar, popovers, hover fills on a sheet */ --n-bg-sunken: 0.935; --k-bg-sunken: 0.85; /* #E2EDE3 recessed wells, code */ --n-bg-overlay: 0.3; --k-bg-overlay: 0.8; /* modal scrim, 75% */ /* ---- border ---- */ --n-border-subtle: 0.918; --k-border-subtle: 0.8; /* #DDE7DE dividers inside a sheet */ --n-border-default: 0.868; --k-border-default: 1.05; /* #CBD8CC sheet edges */ --n-border-strong: 0.775; --k-border-strong: 1.3; /* #ABBBAD hover, floating surfaces */ --n-border-control: 0.58; --k-border-control: 1.5; /* #6F7F70 form-control edges: 3.6 canvas / 4.1 surface / 3.9 raised (WCAG 1.4.11) */ /* ---- text (dark moss ink, never pure black) ---- */ --n-text-primary: 0.255; --k-text-primary: 1.3; /* #1A261C 15.2:1 (14.5 on raised, 13.2 on canvas) */ --n-text-secondary: 0.43; --k-text-secondary: 1.4; /* #465447 7.8:1 (7.4 on raised, 6.7 on canvas) — labels, metadata */ --n-text-tertiary: 0.515; --k-text-tertiary: 1.3; /* #5E6C5F 5.4:1 (5.1 on raised, 4.7 on canvas) — hints, placeholders */ --n-text-disabled: 0.62; --k-text-disabled: 0.9; /* #7F8980 3.0:1 on canvas, 3.5 surface; disabled only (WCAG-exempt), well below tertiary */ --n-text-inverse: 0.985; --k-text-inverse: 0.3; /* #F7FBF8 on status fills: 7.2 on danger */ /* ---- accent (palette "garden" light), three roles: text = brown clay ink, fired dark enough to clear every status under colour-blind vision (hue 52, 30 deg from danger); fill = terracotta, the brand colour (labelled: primary button, plates, selected segment; also every unlabelled mark via --color-accent-mark); wash = sand, apart from danger-muted ---- */ --color-ember: #5A2800; /* oklch(0.34 0.088 52) 11.8:1 (11.2 on raised, 10.2 on canvas, 9.9 on its muted) */ --color-ember-bright: #7A3A0C; /* oklch(0.43 0.104 50) 8.4:1 (8.0 on raised) — hover and active text, a step lighter */ --color-ember-muted: #FCE5D3; /* wash: sand */ --color-accent-fill: #A55946; /* oklch(0.55 0.110 36) terracotta; white on it 5.1:1, 3:1+ on surface, so --color-accent-mark keeps its default (= the fill) */ --color-accent-fill-hover: #874A33; /* oklch(0.48 0.090 41) hover; white on it 6.9:1 */ --color-on-accent: #FFFFFF; /* on the terracotta fill */ --color-focus: var(--color-ember); /* 10.2:1 on canvas */ --color-selection: rgba(90, 40, 0, 0.2); --color-link-underline: rgba(90, 40, 0, 0.45); /* chart slots: palette "garden"'s light set, chart-1 = the fill-hover step (R3-QZ-2) */ --color-chart-1: #874A33; /* oklch(0.48 0.090 41) = fill-hover */ --color-chart-2: #515BC3; /* oklch(0.52 0.161 275) */ --color-chart-3: #209993; /* oklch(0.62 0.100 190) */ --color-chart-4: #70701D; /* oklch(0.53 0.102 109) */ --color-chart-5: #005959; /* oklch(0.42 0.072 195) */ --color-chart-6: #4E3C8E; /* oklch(0.42 0.130 290) */ --color-chart-7: #00787D; /* oklch(0.52 0.088 200) */ --color-chart-8: #78914B; /* oklch(0.62 0.100 125) */ /* ---- status: idle re-tinted to moss grey (the rest: base-tokens.css) ---- */ --color-idle: #465047; /* oklch(0.42 0.02 148) 7.0:1 on muted, 8.2 on surface; clay dE 13.2 protan (base: #505561) */ --color-idle-muted: #E7ECE7; /* oklch(0.94 0.01 148) */ /* ---- shadow — paper on a board: short, soft, moss-tinted, never black ---- */ --shadow-sm: 0 1px 2px rgba(26, 40, 28, 0.08); --shadow-md: 0 1px 2px rgba(26, 40, 28, 0.06), 0 6px 16px -4px rgba(26, 40, 28, 0.12); --shadow-lg: 0 2px 4px rgba(26, 40, 28, 0.06), 0 18px 40px -10px rgba(26, 40, 28, 0.22); --shadow-glow-ember: 0 0 0 1px var(--color-ember), 0 8px 20px -10px rgba(26, 40, 28, 0.28); /* ---- ornaments (seedling.css): one step darker, pale leaves vanish on paper ---- */ --orn-leaf: var(--color-border-control); --orn-sprout: var(--color-text-tertiary); --orn-crimp: color-mix(in oklab, var(--color-border-default) 55%, transparent); --orn-crimp-ground: var(--color-bg-sunken); }