/* ========================================================================== Waggle — platform default theme (the "honey" theme) ========================================================================== This is the canonical DEFAULT that ships with the white-label platform. Individual studios (Laso Studio is tenant #1) override it via `tenant_theme`. The theming runtime serves a tenant's row like this: tenant_theme.palette_json -> { paper, navy, plum, pink, ink } tenant_theme.fonts_json -> { display, body, mono } tenant_theme.logo_key -> asset path for the studio mark tenant_theme.custom_css -> optional raw overrides appended last The five palette_json keys map 1:1 to the role tokens below (same names the app already reads: --paper --navy --plum --pink --ink, plus --hairline). Keeping the key names identical means the default and any tenant theme are interchangeable: the runtime just fills these custom properties from JSON. The honey-pigment aliases (--honey, --amber-comb, ...) are convenience names for authoring; roles are what the app consumes. Default honey theme as a tenant_theme row (for reference / seeding): palette_json = {"paper":"#FBF3DE","navy":"#4A3212","plum":"#C77D0A","pink":"#F2B807","ink":"#161311"} fonts_json = {"display":"Fraunces","body":"Manrope","mono":"JetBrains Mono"} ========================================================================== */ :root { color-scheme: light dark; /* --- honey pigments (theme-agnostic names) --- */ --honey: #F2B807; /* the signal color: CTAs, the waggle run, highlights */ --amber-comb: #C77D0A; /* deeper comb amber: secondary accent, rims */ --beeswax: #4A3212; /* beeswax-brown ink: structural brand, headings */ --cream: #FBF3DE; /* warm cream: paper */ --worker-black: #161311; /* worker-bee black: body ink, deepest surface */ /* --- role tokens (these ARE the tenant_theme.palette_json keys) --- */ --paper: var(--cream); /* page background */ --navy: var(--beeswax); /* primary brand / headings / nav */ --plum: var(--amber-comb); /* secondary accent */ --pink: var(--honey); /* vivid accent / primary action */ --ink: var(--worker-black); /* body text */ /* --- derived surfaces & lines --- */ --panel: #FFFDF5; /* raised card on paper */ --muted: #6E5A3C; /* secondary text on cream */ --hairline: rgba(74, 50, 18, 0.16); /* the soft honeycomb line */ --comb-line: var(--hairline); /* alias used by comb/grid motifs */ --focus: var(--honey); --shadow: 0 1px 2px rgba(22, 19, 17, 0.08), 0 8px 24px rgba(74, 50, 18, 0.10); /* --- type (these ARE the tenant_theme.fonts_json keys) --- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; } /* ========================================================================== Dark treatment — "the hive at night". Paper goes to worker-black, ink to cream; the honey/amber accents keep their glow. Applied by OS preference or an explicit [data-theme="dark"] on . ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: var(--worker-black); --navy: var(--honey); /* headings/brand glow gold on black */ --plum: var(--amber-comb); --pink: #F5B301; /* CTA, a touch brighter to hold on black */ --ink: var(--cream); --panel: #221C17; --muted: #C9B892; --hairline: rgba(251, 243, 222, 0.14); --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45); } } /* Explicit opt-in dark (wins regardless of OS setting). */ :root[data-theme="dark"] { --paper: var(--worker-black); --navy: var(--honey); --plum: var(--amber-comb); --pink: #F5B301; --ink: var(--cream); --panel: #221C17; --muted: #C9B892; --hairline: rgba(251, 243, 222, 0.14); --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45); }