/* ========================================================================== PishJoy design tokens -------------------------------------------------------------------------- This file is the single source of truth for every themeable colour. TIER 1 — the 20 core tokens. These are the ONLY names the admin can edit and the ONLY names the theme emitter is allowed to write. At runtime the emitter renders a second :root {} block in that overrides any token the admin has set; anything unset falls back to the value below. TIER 2 — derived aliases. These map component-level names onto Tier 1 and exist ONLY in this file: no database row, no admin field, never emitted. Creating a new knob therefore takes a code change here AND in the token registry, not a row insert. This is what makes it structurally impossible for (say) the header and its dropdown to drift apart — they read the same Tier 1 token through two different Tier 2 aliases. Load order does not matter. var() substitution is resolved at computed value time, AFTER the cascade has already picked a winner, so this file can be link #1 and the emitter's :root can sit at the end of . Do not add !important in this file. If a token appears not to take effect, the fix is always to find the literal that is still winning and wrap it in var() — never to escalate specificity. Every default below is the exact literal currently in use, so defining this file changes nothing on its own. ========================================================================== */ :root { /* --- TIER 1 : chrome ------------------------------------------------- */ /* The brand surface: header, footer, and any large brand-coloured fill. */ --pj-brand: #051d45; /* Terminus of the header gradient. */ --pj-brand-dark: #020d18; /* Highlight behind a hovered nav item. */ --pj-brand-hover: #1a5a9f; /* Dropdowns and popovers that sit ON the brand chrome. */ --pj-brand-raised: #303540; /* Primary text and icons on brand surfaces. */ --pj-brand-ink: #ffffff; /* Secondary text on brand surfaces — nav links at rest. */ --pj-brand-ink-muted: #c4c7cc; /* --- TIER 1 : surfaces ----------------------------------------------- */ /* The page backdrop behind all content. */ --pj-page-bg: #eef0f3; /* Cards, panels and popups on light backgrounds. */ --pj-surface: #ffffff; /* Body copy. */ --pj-text: #373d48; /* Secondary and helper text. */ --pj-text-muted: #8a8f9c; /* Hairlines, input outlines and dividers. */ --pj-border: #d1d3d9; /* --- TIER 1 : interactive -------------------------------------------- */ --pj-link: #1f518e; /* Defaults to the link colour: the site has never recoloured links on hover, so wiring this up had to be visually inert. Presets set a real hover shade. */ --pj-link-hover: #1f518e; /* Primary action surface — the filled button background. */ --pj-primary: #588cc7; --pj-primary-hover: #467abe; /* Text on top of --pj-primary. */ --pj-primary-ink: #ffffff; /* --- TIER 1 : accent and status --------------------------------------- */ /* Brand accent: footer accent, CMS hero accent, badges. */ --pj-accent: #c8a86e; /* Darker accent, for hover on accent-coloured buttons. */ --pj-accent-hover: #b3935c; /* The "fancyd" green — positive actions. */ --pj-success: #71b950; /* Darker green well / hover on the same buttons. */ --pj-success-hover: #5aa534; /* ====================================================================== */ /* TIER 2 — derived. Never emitted, never editable. */ /* ====================================================================== */ /* --- header chrome ---------------------------------------------------- */ --pj-header-bg: var(--pj-brand); --pj-header-bg-end: var(--pj-brand-dark); --pj-header-border: var(--pj-brand-dark); --pj-header-text: var(--pj-brand-ink-muted); --pj-header-text-hover: var(--pj-brand-ink); /* The header's own menu panels are the brand colour, not the raised grey that #lang_popup and #cart_popup use - those two are a genuinely different surface and keep --pj-brand-raised. Note the literal being replaced was rgba(5,29,69,.95), so these panels lose 5% translucency and become solid brand. Deliberate: it is imperceptible against the page, and the alternative is either colour-mix (which fails silently) or leaving the panel unable to follow the header at all. */ --pj-header-dropdown-bg: var(--pj-brand); --pj-header-dropdown-text: var(--pj-brand-ink-muted); --pj-header-dropdown-hover-bg: var(--pj-brand-raised); --pj-header-dropdown-hover-text: var(--pj-brand-ink); /* --- footer ----------------------------------------------------------- */ --pj-footer-bg: var(--pj-brand); --pj-footer-text: var(--pj-brand-ink-muted); --pj-footer-heading: var(--pj-brand-ink); --pj-footer-accent: var(--pj-accent); /* --- legacy names ------------------------------------------------------ */ /* pishjoy-main.css already reads these 281 times but nothing ever defined them, so every one of those declarations has been silently falling back to its inline literal. Mapping them here is what makes those 281 declarations themeable without editing a single stylesheet. */ --pj-body-text: var(--pj-text); --pj-muted-text: var(--pj-text-muted); --pj-divider: var(--pj-border); --pj-btn-primary-bg: var(--pj-primary); --pj-btn-primary-hover: var(--pj-primary-hover); /* --pj-btn-primary-bg is used 41 times as `color:` on text and only ~8 times as a background. Keeping those text uses on their own alias means a dark primary can never render 41 pieces of body text unreadable. Phase 6 re-points those declarations here; today it resolves identically. */ --pj-accent-text: var(--pj-primary); /* --- chrome component names -------------------------------------------- */ /* These 13 were previously defined in an identical :root block duplicated verbatim in templates/header.php and templates/header_login.php, so the two copies could silently drift apart. They live here once instead. Two of them used to chain through --cms-*, which looked harmless because --cms-* now derives from Tier 1 anyway. It was not: static-pages-global.css is only linked on non-landing, non-auth pages, so on the home page and the sign-in pages --cms-* is undefined and those two fell back to a hardcoded #333 and #fff. That is why the mobile menu ignored the theme on exactly the pages people land on. They now reference Tier 1 directly. These paint the mobile menu, which is styled by the inline @media block in header.php rather than by any stylesheet - so until they resolved through Tier 1, changing the theme did nothing to it. Three remain frozen ON PURPOSE, and should stay that way: --pj-theme-danger-soft is a semantic warning colour. Sign-out and destructive actions should read as red whatever the brand is, so tying it to the palette would be wrong. --pj-theme-focus-ring and --pj-theme-divider-on-dark are white at low opacity, sitting on the brand surface. They cannot derive from a hex token without colour-mix, which fails silently. They assume the brand stays dark - an accepted constraint of this system. */ --pj-theme-text-primary: var(--pj-text); --pj-theme-text-muted: var(--pj-text); --pj-theme-text-subtle: var(--pj-text-muted); --pj-theme-bg-surface: var(--pj-surface); --pj-theme-bg-soft: var(--pj-page-bg); --pj-theme-border-strong: var(--pj-text-muted); --pj-theme-danger-soft: #ffb3b3; --pj-theme-divider-on-dark: rgba(255,255,255,0.15); --pj-theme-focus-ring: rgba(255,255,255,0.6); --pj-theme-fancyd-bg: var(--pj-success); --pj-theme-fancyd-accent: var(--pj-success-hover); --pj-theme-fancyd-accent-border: var(--pj-success-hover); --pj-theme-fancyd-bg-hover: var(--pj-success); }