/* ============================================================================ HiClotho — "Warm Paper & Ink" color system A calm, low-contrast digital-heirloom palette. ONE interactive accent (deep-forest teal in light / bright sage in dark). The single retained semantic hue is `highlight` (heirloom gold) for the star/highlight feature. Values mirror lib/core/theme/app_colors.dart exactly (HSL preserved). ============================================================================ */ :root { /* ── Base scalars (light) ─────────────────────────────────────────────── */ /* Interactive accent — deep forest teal. Every branded/interactive surface. */ --primary: hsl(170 40% 30%); --primary-foreground: #ffffff; /* secondary + accent alias the single accent (kept so references resolve). */ --secondary: hsl(170 40% 30%); --accent: hsl(170 40% 30%); /* Highlight — warm heirloom gold. The ONE surviving semantic (star feature). */ --highlight: hsl(43 74% 49%); --success: hsl(155 45% 40%); --destructive: hsl(350 70% 42%); /* Paper & ink neutrals */ --background: hsl(50 20% 98%); /* warm off-white canvas */ --foreground: hsl(160 60% 10%); /* near-black green ink */ --muted: hsl(50 15% 95%); --muted-foreground: hsl(50 5% 50%); /* earth gray */ --border: hsl(48 14% 88%); /* warm hairline */ --input: hsl(50 16% 96%); /* faint warm field wash */ --card: #ffffff; /* pure white surface */ --card-foreground: hsl(160 60% 10%); /* Tapestry surface tokens (from the Dart `paper/cream/ink/edge/mute` set) */ --paper: hsl(50 20% 98%); /* header / canvas wash */ --cream: hsl(48 22% 96%); /* elevated tile / sheet */ --ink: hsl(160 45% 8%); /* dark hero-card surface */ --edge: hsl(48 14% 88%); /* 1px hairline weight */ --mute: hsl(50 5% 50%); /* secondary text on light */ /* Muted paper washes — L3 chapter backgrounds / gentle fills (retinted from the retired loud pastels so they read as paper, not semantic color). */ --wash-sand: hsl(35 40% 92%); /* warm sand */ --wash-sage: hsl(90 20% 90%); /* pale sage */ --wash-teal: hsl(170 22% 90%); /* pale teal */ /* ── Person / avatar palette ────────────────────────────────────────────── Fixed-brightness brand chips (bg → fg) so initials read on any theme. Mirrors AppAvatar._palette (rose/blush/lime/teal/forest/mute). */ --person-rose: #e88aa0; --on-person-rose: #0e1a14; --person-blush: #f5b8c6; --on-person-blush: #0e1a14; --person-lime: #bfe04a; --on-person-lime: #0e1a14; --person-teal: #2ea69a; --on-person-teal: #f5f1e8; --person-forest: #0f3d2e; --on-person-forest: #bfe04a; --person-mute: #6a766e; --on-person-mute: #f5f1e8; /* Literal chip cream/ink used for contrast math regardless of theme. */ --chip-cream: #f5f1e8; --chip-ink: #0e1a14; /* ── Semantic aliases (author against these, not the base scalars) ─────── */ --surface-page: var(--background); --surface-card: var(--card); --surface-raised: var(--cream); /* surfaceContainerHighest */ --surface-inverted: var(--foreground); /* hero card bg (ink on cream) */ --text-body: var(--foreground); --text-muted: var(--muted-foreground); --text-on-accent: var(--primary-foreground); --text-on-inverted: var(--background); /* text drawn on an inverted card */ --hairline: var(--border); --focus-ring: var(--primary); } /* ── Dark mode — "near-black forest" ────────────────────────────────────── Apply with or .theme-dark on any container. The accent flips to a LIGHT sage, so text on the accent uses dark ink. */ :root[data-theme="dark"], .theme-dark { --primary: hsl(75 40% 65%); /* bright sage */ --primary-foreground: hsl(160 45% 12%);/* dark ink on the light accent */ --secondary: hsl(75 40% 65%); --accent: hsl(75 40% 65%); --highlight: hsl(45 80% 60%); --success: hsl(155 45% 55%); --destructive: hsl(350 70% 42%); --background: hsl(160 20% 8%); --foreground: hsl(50 20% 92%); /* soft cream */ --muted: hsl(170 15% 18%); --muted-foreground: hsl(160 10% 65%); --border: hsl(170 12% 24%); --input: hsl(170 15% 18%); --card: hsl(170 15% 15%); /* muted dark teal surface */ --card-foreground: hsl(50 20% 92%); --paper: hsl(160 20% 8%); --cream: hsl(170 15% 18%); --ink: hsl(160 45% 8%); --edge: hsl(170 12% 24%); --mute: hsl(160 10% 65%); }