/* ============================================================ TALISMAN SOUL — BRAND COLOR SYSTEM (DARK THEME) Single source of truth for talismansoul.com ------------------------------------------------------------ The site is DARK-DOMINANT: near-black background, parchment and gold text, gold accents. These defaults reflect that. A LIGHT section is the exception (see --color-invert-* below). HOW TO USE: 1. Link this file in the of index.html BEFORE the main stylesheet: 2. In the site CSS, reference colors by variable, never raw hex, e.g. color: var(--color-text); 3. Two-tier system: --ts-* = named brand palette (raw values) --color-* = semantic roles (what components should use) Reach for a --color-* role first; fall back to a raw --ts-* value only when no role fits. ============================================================ */ :root { /* ---- PRIMARY ---------------------------------------------- */ --ts-ink: #1a1714; /* true near-black: page background, darkest base */ --ts-slate: #484b5a; /* softer dark: raised surfaces/cards on dark */ --ts-parchment: #ede6da; /* warm cream: body & heading text on dark */ --ts-gold: #c9a34b; /* the accent: buttons, links, accent words */ /* ---- SECONDARY -------------------------------------------- */ --ts-forest: #123524; /* deep green: footer, feature blocks */ --ts-bronze: #977752; /* warm metal: borders, dividers, rules */ --ts-iron: #a3a3a3; /* cool grey: muted text (cool contexts) */ --ts-crimson: #5a2a2b; /* deep oxblood: rare alerts, sale tags only */ /* ---- MOOD ACCENTS (use sparingly, seasonal) --------------- */ --ts-lavender: #a89db0; /* soft seasonal accent */ --ts-sage: #7c8c71; /* earthy seasonal accent */ /* ---- ADDITIONS (new) -------------------------------------- */ --ts-vellum: #f7f3ea; /* shade lighter than parchment: light-section bg */ --ts-stone: #8f8475; /* warm taupe: borders & muted text (warm) */ /* gold pressed/hover state (a darker gold, generated from --ts-gold) */ --ts-gold-deep: #ab8b40; /* ============================================================ SEMANTIC ROLES — components should use THESE (dark theme: dark bg + light text is the default) ============================================================ */ /* Surfaces & backgrounds */ --color-bg: var(--ts-ink); /* page background — darkest base */ --color-surface: var(--ts-slate); /* cards/panels raised on the dark */ --color-footer: var(--ts-forest); /* footer background */ /* The LIGHT/inverted section — the exception, not the default */ --color-invert-bg: var(--ts-parchment); /* light contrast section bg */ --color-invert-surface: var(--ts-vellum); /* cards inside a light section */ --color-invert-text: var(--ts-ink); /* text inside a light section */ /* Text (on the dark default) */ --color-text: var(--ts-parchment); /* body copy on dark */ --color-heading: var(--ts-parchment); /* headings on dark */ --color-text-muted: rgba(237, 230, 218, 0.65); /* dimmed parchment */ /* Accent / interactive */ --color-accent: var(--ts-gold); /* buttons, links, accent words */ --color-accent-hover: var(--ts-gold-deep); /* hover/active state of accent */ --color-link: var(--ts-gold); /* inline links */ --color-on-accent: var(--ts-ink); /* text/icon on a gold button */ /* Lines & borders */ --color-border: var(--ts-bronze); /* visible dividers */ --color-border-subtle: rgba(201, 163, 75, 0.22); /* faint gold hairline */ /* Status (rare) */ --color-alert: var(--ts-crimson); /* sale tag, warning accent */ } /* ============================================================ USAGE MAP (quick reference for Claude Code) ------------------------------------------------------------ Page background ............ var(--color-bg) ink (near-black) Cards / panels on dark ..... var(--color-surface) slate Body text .................. var(--color-text) parchment Headings ................... var(--color-heading) parchment Muted / subtitle text ...... var(--color-text-muted) dimmed parchment Accent words / links ....... var(--color-link) gold Buttons (fill) ............. var(--color-accent) gold Button text ................ var(--color-on-accent) ink Button hover ............... var(--color-accent-hover) deep gold Footer (bg) ................ var(--color-footer) forest Dividers / borders ......... var(--color-border) bronze Faint hairlines / frame .... var(--color-border-subtle) Sale / alert ............... var(--color-alert) crimson LIGHT (inverted) section only: Section bg ................. var(--color-invert-bg) parchment Section text ............... var(--color-invert-text) ink Cards in that section ...... var(--color-invert-surface) vellum ============================================================ */ /* ============================================================ CONTRAST — DO / DON'T (readability rules) ------------------------------------------------------------ DO parchment text on ink / slate / forest — primary body, high contrast DO gold for accent words, links, headings, and button fills on dark DO ink text only inside a LIGHT (parchment) section DON'T set long body copy in gold — use parchment; reserve gold for accents DON'T put ink text on slate — slate is a raised surface, not a text bg; if you need dark text, use a light (parchment) section instead ============================================================ */ /* ============================================================ OPTIONAL BASE RULES Safe starting defaults. Adopt or adapt — colors only, no changes to layout, spacing, or fonts. ============================================================ */ body { background-color: var(--color-bg); color: var(--color-text); } h1, h2, h3, h4, h5, h6 { color: var(--color-heading); } a { color: var(--color-link); } a:hover, a:focus { color: var(--color-accent-hover); } .btn, button { background-color: var(--color-accent); color: var(--color-on-accent); border: none; } .btn:hover, button:hover { background-color: var(--color-accent-hover); } /* Footer */ .site-footer { background-color: var(--color-footer); color: var(--color-text); } /* Card / raised surface on the dark page */ .card { background-color: var(--color-surface); border: 0.5px solid var(--color-border-subtle); } /* LIGHT / inverted section — the exception */ .section--light { background-color: var(--color-invert-bg); color: var(--color-invert-text); } .section--light .card { background-color: var(--color-invert-surface); }