/* ============================================================ BEJ MODE — warm beige theme, toggled via Classic mode = no attribute = original petrol/teal palette. Only variable REMAPS live here; scoped so classic is untouched. ============================================================ */ html[data-theme="bej"]{ /* Light surfaces & on-dark text: white -> warm cream */ --color-white:#f7f0e1; /* Neutral scale (ink): cool blue-gray -> warm taupe/espresso */ --color-ink-50:#efe7d6; --color-ink-100:#e8ddc7; --color-ink-200:#dccdae; --color-ink-300:#c6b28c; --color-ink-400:#a48d66; --color-ink-500:#836b45; --color-ink-600:#6a5537; --color-ink-700:#55432b; --color-ink-800:#433420; --color-ink-900:#2a2013; /* main dark text + dark sections */ --color-ink-950:#20170a; /* deepest espresso (hero gradients) */ /* Primary accent (petrol/teal) -> warm bronze/caramel */ --color-petrol-50:#f7efdf; --color-petrol-100:#efe1c8; --color-petrol-200:#e2cda4; --color-petrol-300:#cdad74; --color-petrol-400:#b58e4c; --color-petrol-500:#9c7431; --color-petrol-600:#876128; /* button backgrounds */ --color-petrol-700:#6d4e20; /* link / accent text (AA on cream) */ --color-petrol-800:#573f1c; --color-petrol-900:#46331a; /* topbar background */ --color-petrol-950:#2e2110; /* Secondary accent (leaf/green) -> muted olive-gold */ --color-leaf-50:#f5efdc; --color-leaf-100:#ece0bd; --color-leaf-200:#ddca92; --color-leaf-300:#c9b268; --color-leaf-400:#ab9440; --color-leaf-500:#8a7530; --color-leaf-600:#6f5d27; --color-leaf-700:#564920; --color-leaf-800:#43391a; --color-leaf-900:#393016; } /* Brand logo (teal PNG on transparent) -> dark bronze so it reads on cream */ html[data-theme="bej"] img[src*="bej-logo"]{ filter:grayscale(1) sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(.62) contrast(1.05); } /* Gentle warmth on photography so the whole page feels beige. The brand logo is reset above/below with its own stronger filter. */ html[data-theme="bej"] img:not([src*="bej-logo"]){ filter:sepia(.16) saturate(.94) brightness(1.01); } /* ============================================================ Bej / Klasik switch — styling for the injected toggle. Lives in BOTH modes (button always visible in the header). ============================================================ */ .bejt{background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;line-height:0} .bejt-track{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center; background:#efe7d7;border:1px solid #d8c9ad;border-radius:999px;padding:3px;height:32px;box-sizing:border-box} .bejt-opt{position:relative;z-index:1;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.02em; padding:0 12px;line-height:24px;color:#8a7a5c;transition:color .2s;white-space:nowrap;font-family:inherit} .bejt-knob{position:absolute;top:3px;left:3px;bottom:3px;width:calc(50% - 3px);border-radius:999px;background:#fff; box-shadow:0 1px 3px rgba(60,45,20,.28);transition:transform .25s ease} .bejt:not(.bej-on) .bejt-opt-classic{color:#2f4a4d} .bejt.bej-on .bejt-knob{transform:translateX(100%)} .bejt.bej-on .bejt-track{background:#e7dcc6;border-color:#c9b58e} .bejt.bej-on .bejt-opt-bej{color:#6d4e20} .bejt:focus-visible{outline:none} .bejt:focus-visible .bejt-track{box-shadow:0 0 0 3px rgba(124,90,30,.35)} @media (max-width:400px){.bejt-opt{padding:0 8px;font-size:11px}}