/* ============================================================ Kanjo Toolbox theme — Purple Toolbox design system. Dark-purple canvas + white cards + one accent per app. Remaps the shared design tokens (the same names styles.css / the apps already use) to the Purple Toolbox look, so token-driven apps (/p, /staff, /hire, …) converge on one system. Per-app accent: set --accent / --accent-deep / --accent-tint on :root (default = Contacts coral). Load Hanken Grotesk. Link AFTER styles.css and after any local :root the page defines (so these token values win). ============================================================ */ :root { /* per-app accent (override on the page) — default: Contacts coral */ --accent: #EE5A2B; --accent-deep: #C7431C; --accent-tint: #FDEBE3; /* surfaces + ink (cards are white; text is dark on cards) */ --card: #FFFFFF; --ink: #241B33; --ink-soft: #5C5470; --ink-faint: #9990AB; /* the apps drive accents through the clay tokens → map them to --accent */ --clay: var(--accent); --clay-deep: var(--accent-deep); --clay-tint: var(--accent-tint); /* status + secondary */ --olive: #2E9E5B; --olive-tint: #E7F4EC; --danger: #C7431C; --mustard: #E0902A; /* lines */ --line: #ECE6F2; --line-soft: #F4F0F8; --hole: #D8CFE6; /* NOTE: --paper stays LIGHT — the apps use it as a light field fill and as light text on dark emphasis cards. The page canvas is set on below, NOT via --paper. */ --paper: #F5F1FB; --paper-2: #F5F1FB; --paper-deep: #ECE7F4; --shadow-card: 0 14px 40px rgba(20,8,50,0.14), 0 2px 6px rgba(20,8,50,0.06); --shadow-lift: 0 26px 56px rgba(20,8,50,0.32); /* one type family — drop serif/mono, everything is Hanken Grotesk */ --serif: 'Hanken Grotesk', system-ui, sans-serif; --sans: 'Hanken Grotesk', system-ui, sans-serif; --mono: 'Hanken Grotesk', system-ui, sans-serif; /* text colours for content sitting directly on the purple canvas */ --on: #F3ECFF; --on-soft: #C9BBE6; --on-dim: #A99AD0; } html { background: #2A1136; } body { background-color: #2A1136; background-image: radial-gradient(1100px 620px at 86% -12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), radial-gradient(820px 560px at -6% 6%, rgba(110,123,224,0.16), transparent 55%); color: var(--on); font-family: var(--sans); } /* drop the warm paper-grain overlay that styles.css paints */ body::before { display: none !important; } ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); } /* Headings read a touch bolder in sans than they did in the serif. */ h1, h2, h3 { letter-spacing: -0.02em; } /* The canvas text is light (--on); white cards must reset to dark ink so any heading/text that inherits (rather than setting its own colour) stays legible. */ .card, .pcard, .pgate { color: var(--ink); }