/* Tokens: colours, fonts and sizes, for the app and the admin. */
/* All values come from the Claude Design canvas (see LLM/ASSETS.md). */

:root {
	--ground: #FAF8F3;			/* screen background */
	--surface: #FCFBF8;			/* cards, fields */
	--sand: #E8E6DA;			/* routine card, badges */
	--linen: #F4F1EA;			/* Kelly card */
	--bar: #FFFFFF;				/* tab bar, active choice */
	--bar-line: #EFEBE3;
	--line: #ECE8DF;
	--line-strong: #E5E0D5;
	--rule: #EDE8DE;			/* lines in the writing fields */
	--track: #EEEAE1;			/* segmented control background */
	--hover: #F6F3EC;
	--desk: #E9E5DC;			/* outside the phone screen, on large screens */

	--ink: #2B2A26;
	--ink-soft: #3A3934;
	--muted: #45433D;
	--placeholder: #77746C;
	--pen: #A9A598;
	--accent: #6E7555;			/* olive: surfaces, buttons */
	--accent-ink: #5C6343;		/* olive for text */
	--link: #565D3E;
	--link-hover: #3F4530;
	--spark: #B9BCA3;
	--on-accent: #FFFFFF;
	--on-accent-soft: rgba(255, 255, 255, 0.16);
	--scrim: rgba(43, 42, 38, 0.55);		/* behind a dialog */
	--scrim-light: rgba(43, 42, 38, 0.45);	/* outside the circle when cropping a photo */
	--ring: #C9A889;			/* border around the avatar */
	/* the three looks, as dots in Settings → Colour (the same in every look) */
	--swatch-green: #6E7555;
	--swatch-rose: #9C5E66;
	--swatch-blue: #587590;
	--swatch-green-soft: #E8E6DA;
	--swatch-rose-soft: #F2E3E1;
	--swatch-blue-soft: #E1E8EE;
	--error: #9A3B2E;

	--serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', system-ui, -apple-system, sans-serif;

	--screen-width: 390px;
	--screen-height: 844px;
	--top: 58px;
	--bottom: 20px;
}

/* The user's look (Settings → Colour, js/lib/theme.js): only the accent colours change; green is
   the default above. Contrast of white on --accent stays about as high as the green's (≥ 4.6:1). */
:root[data-theme="rose"] {
	--sand: #F2E3E1;
	--spark: #E3C5C7;
	--accent: #9C5E66;
	--accent-ink: #8A4C55;
	--link: #844A53;
	--link-hover: #683840;
}

:root[data-theme="blue"] {
	--sand: #E1E8EE;
	--spark: #BCCAD6;
	--accent: #587590;
	--accent-ink: #4A6379;
	--link: #475F74;
	--link-hover: #33475A;
}