/** * Habbend — light theme tokens (system + toggle). * Warm stone off-white — not pure white. * Only applies when is set. * Stage / scrim tokens stay dark (defined in dark file, not overridden). */ html[data-theme="light"], html[data-theme="paper"] { color-scheme: light; /* Page */ --bg: #e4dfd4; --bg-elevated: #ebe6db; --fg: #1e242c; --muted: #5e6975; --accent: #2f6fdb; --accent-soft: rgba(47, 111, 219, 0.14); --success: #0f9f6e; --danger: #d94848; --warn: #c9810a; /* Translucent panels / hairlines */ --panel: rgba(30, 36, 44, 0.045); --panel-border: rgba(30, 36, 44, 0.12); --panel-hover: rgba(30, 36, 44, 0.08); --hairline: rgba(30, 36, 44, 0.1); --hairline-strong: rgba(30, 36, 44, 0.16); --hairline-focus: rgba(30, 36, 44, 0.28); /* Content boxes */ --content-box-bg: #f1ece3; --content-box-border: rgba(30, 36, 44, 0.14); --content-box-shadow: 0 3px 0 1px rgba(40, 32, 20, 0.18); /* Controls */ --control-bg: #d9d2c5; --control-bg-hover: #cfc7b8; --control-border: rgba(30, 36, 44, 0.2); --control-border-hover: rgba(30, 36, 44, 0.32); --control-shadow: 0 3px 0 1px rgba(40, 32, 20, 0.22); --control-shadow-active: 0 1px 0 1px rgba(40, 32, 20, 0.22); --control-shadow-soft: 0 2px 0 1px rgba(40, 32, 20, 0.16); /* Inset surfaces */ --surface-inset: #e8e2d6; --surface-inset-hover: #ddd5c6; --surface-raised: #e0d8ca; --surface-raised-hover: #d4cbb8; /* Deep wells under pixel art / tables */ --well-bg: #d8d0c2; --well-deep: #cdc4b4; --table-row: #ebe4d8; --table-row-hover: #e0d8ca; /* Header sheets / dropdowns / bottom nav */ --chrome-sheet: #efe9de; --chrome-sheet-border: rgba(30, 36, 44, 0.18); --bottom-nav-bg: rgba(241, 236, 227, 0.96); --bottom-nav-border: rgba(30, 36, 44, 0.12); --nav-hover-bg: rgba(30, 36, 44, 0.06); --nav-current-bg: rgba(30, 36, 44, 0.1); --nav-strong: #1e242c; /* Floating glass chips */ --chip-bg: rgba(241, 236, 227, 0.9); --chip-bg-strong: rgba(241, 236, 227, 0.96); --chip-border: rgba(30, 36, 44, 0.16); --chip-shadow: 0 2px 0 1px rgba(40, 32, 20, 0.16); /* Lighter recessed fields / fact chips / ledger wells */ --field-bg: #f7f3ea; --inset-bg: #f3eee4; --inset-bg-soft: #f6f2e9; --inset-row-border: rgba(30, 36, 44, 0.08); --chart-baseline: rgba(30, 36, 44, 0.14); --chart-dot-last: #fff; /* Off-white Habbo stage floor + darker stone pad */ --stage-floor: #e4dfd4; --stage-tile-image: url("/assets/tile_bg-paper.png"); --stage-tile-filter: none; --stage-tile-fill: #ebe6db; --stage-tile-stroke: rgba(120, 108, 88, 0.28); --stage-tile-pulse: rgba(90, 78, 58, 0.28); /* Seamless 64×32 iso diamond for catalogue thumbs (CSS background). */ --stage-tile-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpolygon points='32,0 64,16 32,32 0,16' fill='%23ebe6db' stroke='%23786c5847' stroke-width='1'/%3E%3C/svg%3E"); --stage-pad-fill: rgba(176, 164, 142, 0.94); --stage-pad-stroke: rgba(120, 108, 88, 0.45); --stage-chip-bg: rgba(255, 252, 245, 0.88); --stage-chip-bg-hover: rgba(255, 255, 255, 0.96); --stage-chip-border: rgba(80, 68, 48, 0.22); --stage-chip-border-hover: rgba(80, 68, 48, 0.36); --stage-chip-shadow: 0 2px 0 1px rgba(60, 48, 28, 0.18); --stage-chip-shadow-active: 0 1px 0 1px rgba(60, 48, 28, 0.18); --stage-chip-fg: rgba(40, 32, 20, 0.88); --stage-chip-fg-strong: #1e1810; /* Atmosphere */ --body-glow-a: rgba(255, 255, 255, 0.55); --body-glow-b: rgba(255, 255, 255, 0.4); --shadow: 0 12px 36px rgba(40, 32, 20, 0.12); --type-emboss: rgba(40, 32, 20, 0.18); --title-shadow: 0 1px 0 rgba(40, 32, 20, 0.22); --icon-fg: var(--muted); --habbo-bevel: linear-gradient( 180deg, rgba(255, 255, 255, 0.35) 0 50%, rgba(0, 0, 0, 0.04) 50% 100% ); /* Auth notices — readable on cream panels (not white-on-pale). */ --auth-notice-warn-fg: #8a5600; --auth-notice-warn-bg: #f3dfb4; --auth-notice-warn-border: #d4a03a; --auth-notice-error-fg: #b13232; --auth-notice-error-bg: #f3d4d0; --auth-notice-error-border: #d98a82; }