/* ============================================================ Christopher Wagner — Color tokens Direction: Warm Editorial — an indigo-violet spine with a warm amber accent over warm cream. Values sampled directly from Chris's live one-pager builder (the brand's ground truth). Token NAMES are stable; consuming components read the semantic aliases at the bottom. ============================================================ */ :root { /* ---------- PRIMITIVES — the raw palette ---------- */ /* Indigo-violet — the signature spine (deep -> lighter) */ --brand-ink-deep: #241D3A; /* darkest: uppercase section heads, editor chrome */ --brand-ink-plum: #2A0F33; /* the mark's own ink — logo art only, never text */ --brand-violet-deep: #2F1E62; /* names, headings, the pull-quote, role titles */ --brand-indigo: #3C2A6E; /* mid gradient stop */ --brand-violet: #45348B; /* SIGNATURE indigo-violet: stat numbers, accents, borders */ --brand-violet-soft: #C3BAE0; /* light violet text on dark panels */ --brand-lavender: #EDE9F5; /* lightest violet wash / text on dark */ /* On-anchor text steps (over the indigo gradient) */ --brand-on-anchor: #EDE9F5; /* primary text on dark */ --brand-on-anchor-soft: #DCD6EE; /* secondary on dark */ --brand-on-anchor-faint: #ADA3D0; /* tertiary on dark (sub-labels) */ /* Amber — the single accent */ --brand-amber: #D9854A; /* base accent: dashes, CTAs, the ring, key numbers */ --brand-amber-light: #E8A765; /* lighter amber: small-caps labels on dark, gradient */ --brand-amber-dark: #A65A1E; /* legible amber text on cream (CTA heading) */ --brand-peach-1: #FBEDE0; /* CTA gradient start */ --brand-peach-2: #F7E2CF; /* CTA gradient end */ --brand-peach-border:#E6C9A8; /* CTA hairline */ /* Warm neutrals */ --brand-cream: #FBF9F5; /* page + card base */ --brand-shell: #EEEBE6; /* outer backdrop behind the card */ --brand-white: #FFFFFF; /* white chips, raised surfaces */ --brand-border: #E5DFD4; /* light chip / hairline border */ --brand-rule: #E8E3DC; /* metric divider rules */ /* Ink — text */ --brand-ink: #3D3653; /* body text */ --brand-ink-2: #4A4360; /* lead / intro body */ --brand-ink-muted: #7A7390; /* captions, supporting */ --brand-ink-faint: #9A93AC; /* dates, fine print */ --brand-chip-ink: #463E5C; /* text inside light chips */ /* Signature gradients */ --gradient-anchor: linear-gradient(168deg, #2F1E62 0%, #3C2A6E 60%, #45348B 100%); /* @kind color */ /* DEPRECATED — the CTA panel is now a FLAT peach field (--color-bg-callout). Kept resolvable for older artifacts; do not use in new work. */ --gradient-cta: linear-gradient(100deg, #FBEDE0, #FBEDE0); /* @kind color */ --gradient-ring: linear-gradient(135deg, #D9854A, #E8A765); /* @kind color */ /* Cool support ramp — legacy, illustration/icon art only. Not core UI; the live brand does not use it. Kept for continuity. */ --cool-1: #4B3D86; --cool-2: #6A5AA6; --cool-3: #8D5BA4; --cool-4: #A77FB8; --cool-5: #C3BAE0; /* ---------- SEMANTIC — use these in practice ---------- */ /* Surfaces */ --color-bg-page: var(--brand-cream); --color-bg-shell: var(--brand-shell); --color-bg-surface: var(--brand-cream); /* Hover/raised. MUST be lighter than --color-bg-surface in both themes: cards lift toward the viewer, never sink. Do not point this at --color-bg-page — in light they are the same cream (no-op) and on dark the page is DARKER. */ --color-bg-surface-raised: var(--brand-white); --color-bg-anchor: var(--brand-violet-deep); /* solid fallback for the gradient */ --color-bg-anchor-deep: var(--brand-ink-deep); --color-bg-callout: var(--brand-peach-1); /* Text */ --color-text: var(--brand-ink); --color-text-lead: var(--brand-ink-2); /* AA-corrected steps. The primitives above are the values sampled from the live one-pager; on cream they measure 4.26:1 (muted) and 2.8:1 (faint), under WCAG AA 4.5:1 for small text. These semantics are darkened so any component reading them is legible; use the raw primitives only for large text or non-text marks. */ --color-text-muted: #6A6382; --color-text-faint: #746D89; --color-text-on-anchor: var(--brand-on-anchor); --color-heading: var(--brand-violet-deep); --color-heading-strong: var(--brand-ink-deep); /* uppercase section heads */ --color-text-accent: var(--brand-amber-dark); /* Brand + accent + lines */ --color-primary: var(--brand-violet); /* signature indigo-violet */ --color-primary-deep: var(--brand-violet-deep); --color-accent: var(--brand-amber); --color-accent-hover: var(--brand-amber-dark); /* Availability dot. The ONE green on a cwagner.co surface, and it is borrowed from ImpromptBru rather than invented: same jade the sibling property accents with, so the family owns exactly one green. A 6px dot is non-text, so the 3:1 bar applies. Never use it for anything but status — there is no green semantic ramp in this system. */ --color-status-open: #2A8560; /* Ink ON an accent fill (the accent button). Violet-deep reads on amber; the ImpromptBru scope re-points it because jade is a DARK fill. */ --color-on-accent: var(--brand-violet-deep); --color-ring: var(--brand-amber); /* portrait ring, focus */ --color-border: var(--brand-border); --color-border-subtle: var(--brand-border); --color-border-strong: var(--brand-violet); --color-rule: var(--brand-rule); /* Badge tones — theme-aware, so a badge never has to know which mode it is in */ --color-badge-violet-bg: var(--brand-lavender); --color-badge-violet-ink: var(--brand-violet-deep); --color-badge-amber-bg: var(--brand-peach-1); /* Not --brand-amber-dark: #A65A1E measures 4.46:1 on the peach badge field, just under AA for 12px. Darkened one step, still visibly amber. */ --color-badge-amber-ink: #9E5419; /* Amber text sitting ON the peach field (callouts, the quiet lead action). --color-text-accent (#A65A1E) is only 4.46:1 there, under AA. */ --color-text-accent-on-peach: #9E5419; /* Inks for the shell surface (#EEEBE6), which is darker than the page. */ --color-text-faint-on-shell: #635C78; --color-text-accent-on-shell: #94500F; --color-badge-solid-bg: var(--brand-violet-deep); --color-badge-solid-ink: var(--brand-white); --color-badge-neutral-bg: rgba(61, 54, 83, 0.07); /* chip-ink, NOT ink-muted: on a 7% wash the muted caption ink lands at 3.78:1, which fails AA at badge sizes. chip-ink measures 7.48:1 on the same wash over --color-bg-surface. */ --color-badge-neutral-ink: var(--brand-chip-ink); /* The mark's ink — plum on light, near-white on night. Never plum on a dark field. */ --color-mark: var(--brand-ink-plum); /* LIVE, narrowed. Was the v1 personal-mark fill; the mark is two flat inks now (ring + amber interior), so no MARK reads these. The ramp keeps one shipped job: the cwagner.co header wordmark. Do not mark it legacy without naming a successor for the value it carries — --mark-grad-1 is also the system's only token that resolves to #2F1E62, and retiring it pushes consumers of that value back to hardcoded hexes. New work: use it for the wordmark ramp only. */ --mark-grad-1: #2F1E62; --mark-grad-2: #3C2A6E; --mark-grad-3: #45348B; /* Portrait-ring ramp. On light it IS the mark ramp, so mark, wordmark, and ring agree. It diverges on night: the mark goes flat near-white for silhouette legibility at 18px, but a 3px near-white band around a photo is a halo, so the ring keeps a lifted violet instead. */ --ring-grad-1: #2F1E62; --ring-grad-2: #3C2A6E; --ring-grad-3: #45348B; --shadow-portrait: 0 6px 18px rgba(40, 30, 70, 0.28); } /* ============================================================ NIGHT MODE — first-class, not a skin. Same type, spacing, radii, and the same accent (amber, or jade under data-brand="impromptbru"); only the surface and ink ramps invert. Values derive from the indigo spine (ink-deep / violet-deep / lavender), so the brand reads the same. Resolution order: stored choice > prefers-color-scheme > time of day. Pin a choice with data-theme="dark" | "light" on (or on any element — the scopes are local, so one dark panel in a light page works). ============================================================ */ [data-theme="dark"] { /* Surfaces — night is the indigo spine taken deeper, never neutral grey */ --color-bg-page: #17122B; --color-bg-shell: #100C1F; --color-bg-surface: #241D3A; --color-bg-surface-raised: #2E2749; /* a step UP from surface; see the light note */ --color-bg-anchor: #2F1E62; --color-bg-anchor-deep: #17122B; --color-bg-callout: rgba(217, 133, 74, 0.13); /* Text — the on-anchor steps become the everyday text ramp */ --color-text: #DCD6EE; --color-text-lead: #EDE9F5; --color-text-muted: #ADA3D0; --color-text-faint: #8B82AE; --color-text-on-anchor: #EDE9F5; --color-heading: #F6F3FC; --color-heading-strong: #FFFFFF; --color-text-accent: #E8A765; /* amber-light: amber-dark is illegible on night */ /* Brand + accent + lines */ --color-primary: #C3BAE0; /* violet-soft carries the spine on dark */ --color-primary-deep: #EDE9F5; --color-accent: #E8A765; --color-accent-hover: #D9854A; --color-status-open: #7FB79A; --color-on-accent: var(--brand-violet-deep); --color-ring: #E8A765; --color-border: rgba(237, 233, 245, 0.14); --color-border-subtle: rgba(237, 233, 245, 0.10); --color-border-strong: rgba(195, 186, 224, 0.45); --color-rule: rgba(237, 233, 245, 0.09); --color-badge-violet-bg: rgba(195, 186, 224, 0.14); --color-badge-violet-ink: #DCD6EE; --color-badge-amber-bg: rgba(217, 133, 74, 0.18); --color-badge-amber-ink: #E8A765; --color-text-accent-on-peach: #E8A765; --color-text-faint-on-shell: #ADA3D0; --color-text-accent-on-shell: #E8A765; --color-badge-solid-bg: #45348B; --color-badge-solid-ink: #F6F3FC; --color-badge-neutral-bg: rgba(237, 233, 245, 0.08); --color-badge-neutral-ink: #ADA3D0; --color-mark: #F6F3FC; /* On night the personal mark goes FLAT, not lifted: the same near-white as the series mark, so the pair keeps one colour language in both themes. The stops are equal on purpose — the gradient is a light-mode treatment. */ --mark-grad-1: #F6F3FC; --mark-grad-2: #F6F3FC; --mark-grad-3: #F6F3FC; /* Lifted violet, NOT the mark's flat near-white: a near-white band around a photograph reads as a halo. */ --ring-grad-1: #6A5AA6; --ring-grad-2: #8D82C4; --ring-grad-3: #C3BAE0; /* Depth reads as shadow on night, not as a lighter surface */ --shadow-portrait: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 28px rgba(0, 0, 0, 0.34); } /* System preference, when nothing is pinned. */ @media (prefers-color-scheme: dark) { :root { /* Surfaces — night is the indigo spine taken deeper, never neutral grey */ --color-bg-page: #17122B; --color-bg-shell: #100C1F; --color-bg-surface: #241D3A; --color-bg-surface-raised: #2E2749; /* a step UP from surface; see the light note */ --color-bg-anchor: #2F1E62; --color-bg-anchor-deep: #17122B; --color-bg-callout: rgba(217, 133, 74, 0.13); /* Text — the on-anchor steps become the everyday text ramp */ --color-text: #DCD6EE; --color-text-lead: #EDE9F5; --color-text-muted: #ADA3D0; --color-text-faint: #8B82AE; --color-text-on-anchor: #EDE9F5; --color-heading: #F6F3FC; --color-heading-strong: #FFFFFF; --color-text-accent: #E8A765; /* amber-light: amber-dark is illegible on night */ /* Brand + accent + lines */ --color-primary: #C3BAE0; /* violet-soft carries the spine on dark */ --color-primary-deep: #EDE9F5; --color-accent: #E8A765; --color-accent-hover: #D9854A; --color-status-open: #7FB79A; --color-on-accent: var(--brand-violet-deep); --color-ring: #E8A765; --color-border: rgba(237, 233, 245, 0.14); --color-border-subtle: rgba(237, 233, 245, 0.10); --color-border-strong: rgba(195, 186, 224, 0.45); --color-rule: rgba(237, 233, 245, 0.09); --color-badge-violet-bg: rgba(195, 186, 224, 0.14); --color-badge-violet-ink: #DCD6EE; --color-badge-amber-bg: rgba(217, 133, 74, 0.18); --color-badge-amber-ink: #E8A765; --color-text-accent-on-peach: #E8A765; --color-text-faint-on-shell: #ADA3D0; --color-text-accent-on-shell: #E8A765; --color-badge-solid-bg: #45348B; --color-badge-solid-ink: #F6F3FC; --color-badge-neutral-bg: rgba(237, 233, 245, 0.08); --color-badge-neutral-ink: #ADA3D0; --color-mark: #F6F3FC; /* On night the personal mark goes FLAT, not lifted: the same near-white as the series mark, so the pair keeps one colour language in both themes. The stops are equal on purpose — the gradient is a light-mode treatment. */ --mark-grad-1: #F6F3FC; --mark-grad-2: #F6F3FC; --mark-grad-3: #F6F3FC; /* Lifted violet, NOT the mark's flat near-white: a near-white band around a photograph reads as a halo. */ --ring-grad-1: #6A5AA6; --ring-grad-2: #8D82C4; --ring-grad-3: #C3BAE0; /* Depth reads as shadow on night, not as a lighter surface */ --shadow-portrait: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 28px rgba(0, 0, 0, 0.34); } } /* An explicit light choice must beat the system preference above. */ [data-theme="light"] { --color-bg-page: var(--brand-cream); --color-bg-shell: var(--brand-shell); --color-bg-surface: var(--brand-cream); /* Hover/raised. MUST be lighter than --color-bg-surface in both themes: cards lift toward the viewer, never sink. Do not point this at --color-bg-page — in light they are the same cream (no-op) and on dark the page is DARKER. */ --color-bg-surface-raised: var(--brand-white); --color-bg-anchor: var(--brand-violet-deep); --color-bg-anchor-deep: var(--brand-ink-deep); --color-bg-callout: var(--brand-peach-1); --color-text: var(--brand-ink); --color-text-lead: var(--brand-ink-2); /* AA-corrected steps. The primitives above are the values sampled from the live one-pager; on cream they measure 4.26:1 (muted) and 2.8:1 (faint), under WCAG AA 4.5:1 for small text. These semantics are darkened so any component reading them is legible; use the raw primitives only for large text or non-text marks. */ --color-text-muted: #6A6382; --color-text-faint: #746D89; --color-text-on-anchor: var(--brand-on-anchor); --color-heading: var(--brand-violet-deep); --color-heading-strong: var(--brand-ink-deep); --color-text-accent: var(--brand-amber-dark); --color-primary: var(--brand-violet); --color-primary-deep: var(--brand-violet-deep); --color-accent: var(--brand-amber); --color-accent-hover: var(--brand-amber-dark); /* Availability dot. The ONE green on a cwagner.co surface, and it is borrowed from ImpromptBru rather than invented: same jade the sibling property accents with, so the family owns exactly one green. A 6px dot is non-text, so the 3:1 bar applies. Never use it for anything but status — there is no green semantic ramp in this system. */ --color-status-open: #2A8560; /* Ink ON an accent fill (the accent button). Violet-deep reads on amber; the ImpromptBru scope re-points it because jade is a DARK fill. */ --color-on-accent: var(--brand-violet-deep); --color-ring: var(--brand-amber); --color-border: var(--brand-border); --color-border-subtle: var(--brand-border); --color-border-strong: var(--brand-violet); --color-rule: var(--brand-rule); --color-badge-violet-bg: var(--brand-lavender); --color-badge-violet-ink: var(--brand-violet-deep); --color-badge-amber-bg: var(--brand-peach-1); /* Not --brand-amber-dark: #A65A1E measures 4.46:1 on the peach badge field, just under AA for 12px. Darkened one step, still visibly amber. */ --color-badge-amber-ink: #9E5419; /* Amber text sitting ON the peach field (callouts, the quiet lead action). --color-text-accent (#A65A1E) is only 4.46:1 there, under AA. */ --color-text-accent-on-peach: #9E5419; /* Inks for the shell surface (#EEEBE6), which is darker than the page. */ --color-text-faint-on-shell: #635C78; --color-text-accent-on-shell: #94500F; --color-badge-solid-bg: var(--brand-violet-deep); --color-badge-solid-ink: var(--brand-white); --color-badge-neutral-bg: rgba(61, 54, 83, 0.07); --color-badge-neutral-ink: var(--brand-chip-ink); /* see note above — not ink-muted */ --color-mark: var(--brand-ink-plum); --mark-grad-1: #2F1E62; --mark-grad-2: #3C2A6E; --mark-grad-3: #45348B; --ring-grad-1: #2F1E62; --ring-grad-2: #3C2A6E; --ring-grad-3: #45348B; --shadow-portrait: 0 6px 18px rgba(40, 30, 70, 0.28); --shadow-card: 0 1px 2px rgba(47, 8, 59, 0.06), 0 6px 20px rgba(47, 8, 59, 0.06); }