/* * CN Sign Shop — Theme Tokens * ============================= * * Design tokens for the CN Sign Shop (amsigns) app, derived from the * American Pest and Crawl Services (ACPS) site theme (acps.sendithere.com) * so the two affiliated sites share a visual language. * * Theme model: * - Dark is the DEFAULT (:root). * - Light is an explicit, user-chosen opt-in via :root[data-theme="light"]. * - There is deliberately NO prefers-color-scheme media query — the theme is * a user choice (e.g. a server-side toggle), not driven by the OS. * * Provenance: * - Color and font tokens are carried over from ACPS as-is. * - Spacing, radius, and shadow tokens are NEW additions (ACPS hardcodes * these). They are marked "NEW" below and can be tuned freely. * * Accessibility note: * The accent is re-derived per theme, not reused. Dark uses the brand * yellow (#ffe800); light drops to a dark amber (#7a5c00), because the brand * yellow on white is 1.25:1 and is effectively invisible. Every value below * was measured against its own theme's --surface; ratios are inline. * * The logo's own red-on-yellow is 3.74:1. That is fine for the mark — it is * large, bold, and logos are exempt from WCAG contrast — but it is why those * two colors are never used together for body text. * * Red is reserved for the logo: * --brand-red and --brand-yellow carry the two colors of the CN.Sign mark * and are used by the logo and nothing else. Interactive UI (links, buttons, focus rings) uses the * brand yellow via --accent. Keeping red out of the UI leaves it free to * read as the brand, and leaves --err free to read as an error. * If you find yourself reaching for --brand-red outside the logo, use * --accent instead. * * --ok is NOT aliased to --accent: * ACPS aliased them because its accent was green. The accent is now yellow, * and yellow reads as "warning", not "success", so --ok keeps the ACPS green * as its own value. */ :root { /* ---- Color: dark (default) — from ACPS ---- */ --bg: #081124; /* page background */ --surface: #0d1b38; /* cards, panels */ --surface-raised: #132a52; /* raised / hover surfaces */ --border: #223a63; /* hairlines, dividers */ --text: #eef1f6; /* primary text */ --text-muted: #8b96b3; /* secondary / muted text */ --brand-red: #e2231a; /* LOGO ONLY — the red from the CN.Sign mark */ --brand-red-text: #ffffff; /* text on --brand-red (4.68:1) */ --brand-yellow: #ffe800; /* LOGO ONLY — the yellow diamond */ --accent: #ffe800; /* brand yellow — all interactive UI (13.64:1) */ --accent-text: #081124; /* text on top of --accent (15.05:1) */ --accent-dim: #332e00; /* dim accent background */ --accent-hover: #f2dc00; /* accent hover state (12.20:1) */ --ok: #96c600; /* success — NOT the accent; see note above */ --err: #ff8578; /* error / danger (7.21:1) */ /* ---- Typography: system stacks, no webfonts — from ACPS ---- */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* ---- Spacing scale: NEW (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ /* ---- Border radius: NEW ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* pills / circles */ /* ---- Elevation / shadow: NEW (tuned for the dark default) ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50); } /* * Light theme — explicit opt-in. * Applied when the root element carries data-theme="light" * (e.g. ), set by a user toggle. * Spacing and radius tokens are theme-independent and inherited from :root. */ :root[data-theme="light"] { /* ---- Color: light — from ACPS ---- */ --bg: #f5f6f8; --surface: #ffffff; --surface-raised: #eef0f4; --border: #d0d5e0; --text: #1a2230; --text-muted: #5b6478; --brand-red: #e2231a; /* LOGO ONLY — unchanged; the logo is the logo */ --brand-red-text: #ffffff; /* text on --brand-red (4.68:1) */ --brand-yellow: #ffe800; /* LOGO ONLY — unchanged */ --accent: #7a5c00; /* brand yellow, darkened for light (6.25:1) */ --accent-text: #ffffff; /* text on top of --accent (6.25:1) */ --accent-dim: #fff6d6; --accent-hover: #5f4700; /* (8.79:1) */ --ok: #4d6600; /* success — NOT the accent; see note above */ --err: #b3261e; /* error / danger (6.54:1) */ /* ---- Shadow: NEW — softer, tuned for light surfaces ---- */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14); }