/* ============================================================ Leah E. Welker—Color Tokens Source palette (from brand guide): black #1C1C1C gold yellow #EBC42A gray white #F1F1F1 gray #696C83 parchment #F4EBD7 Mood: warm, luminous, magical. Gold light against deep ink, resting on parchment & pearl. ============================================================ */ :root { /* ---------- Brand core (verbatim from brand guide) ---------- */ --lw-ink: #1C1C1C; /* black—primary dark / background */ --lw-gold: #EBC42A; /* gold yellow—the light, main accent */ --lw-pearl: #F1F1F1; /* gray white—light text / surface */ --lw-twilight: #696C83; /* gray (blue-violet)—quiet secondary */ --lw-parchment: #F4EBD7; /* parchment—warm page / surface */ /* ---------- Ink scale (warm near-blacks → soft grays) ---------- */ --ink-900: #141414; --ink-800: #1C1C1C; /* core ink */ --ink-700: #2A2A2C; --ink-600: #3A3A40; --ink-500: #51525C; --ink-400: #696C83; /* twilight gray */ --ink-300: #9A9CAC; --ink-200: #C7C8D2; --ink-100: #E4E4EA; /* ---------- Gold scale (candle → sunlit → deep amber) ---------- */ --gold-50: #FBF3D2; --gold-100: #F7E7A6; --gold-200: #F2D866; --gold-300: #EBC42A; /* core gold */ --gold-400: #D9AE18; /* hover—deeper */ --gold-500: #BC9410; /* press / on-light text-safe gold */ --gold-600: #8F6F0B; /* deep amber */ --gold-700: #7A5E08; /* darkest—gold text on light surfaces, AA-safe */ /* ---------- Parchment / pearl warm surfaces ---------- */ --parchment-50: #FBF6EC; /* lightest cream */ --parchment-100: #F4EBD7; /* core parchment */ --parchment-200: #EADEC2; --parchment-300: #DCCCA6; --pearl: #F1F1F1; --pearl-warm: #F7F4ED; /* pearl with a parchment whisper */ --white: #FFFFFF; /* ---------- Twilight (blue-violet gray) scale ---------- */ --twilight-700: #4A4C5E; --twilight-600: #595B70; --twilight-500: #696C83; /* core */ --twilight-400: #888AA0; --twilight-300: #ABACBD; --twilight-200: #CDCED9; /* ---------- Semantic—text ---------- */ --text-strong: var(--ink-800); /* headings on light */ --text-body: var(--ink-700); /* running body on light */ --text-muted: var(--twilight-600); /* AA on warm surfaces (~6:1) */ --text-faint: var(--twilight-500); /* AA-min on warm surfaces */ --text-on-ink: var(--pearl); /* body on dark */ --text-on-ink-muted: var(--twilight-300); --text-gold: var(--gold-700); /* gold text that stays AA-legible on light */ --text-gold-on-ink: var(--gold-300);/* gold text on dark */ --text-link: var(--gold-700); /* ---------- Semantic—surfaces ---------- */ --surface-page: var(--parchment-50); /* default warm page */ --surface-page-alt: var(--parchment-100); /* alternating band */ --surface-card: var(--white); --surface-card-warm: var(--pearl-warm); --surface-ink: var(--ink-800); /* dark sections / footer */ --surface-ink-soft: var(--ink-700); --surface-veil: rgba(28, 28, 28, 0.55);/* image overlay scrim */ /* ---------- Semantic—Twilight scene ---------- The brand's default dark "scene": warm gold light on deep ink. Scene-aware surfaces (the site nav/footer and page sections) read these so content can be dropped onto ink without re-stating colors. This is the system default; a light surface overrides --scene-* locally. NOTE: the contextual shift of gold text/links to the bright on-ink gold is applied WHERE the scene is set (on , see ui_kits/website/site.css)—not here—because globalizing --text-gold/--text-link would wash out gold text on light pages. */ --scene-bg: var(--ink-800); --scene-bg-alt: var(--ink-700); --scene-surface: var(--ink-700); --scene-heading: var(--pearl); --scene-text: var(--twilight-300); /* AA on ink-700 cards (~5.3:1) */ --scene-muted: var(--twilight-300); --scene-border: var(--border-on-ink); /* ---------- Semantic—accent / brand ---------- */ --accent: var(--gold-300); --accent-hover: var(--gold-400); --accent-press: var(--gold-500); --accent-soft: var(--gold-50); --on-accent: var(--ink-800); /* ink text on gold buttons */ /* ---------- Borders & lines ---------- */ --border-soft: rgba(28, 28, 28, 0.10); --border-hairline: rgba(28, 28, 28, 0.16); --border-gold: rgba(235, 196, 42, 0.45); --border-on-ink: rgba(241, 241, 241, 0.16); /* ---------- Focus ---------- */ --focus-ring: rgba(235, 196, 42, 0.55); }