/* Baseline Lifestyle — Theme Palettes Centralised colour tokens + derived surfaces per system page. Each page chooses a palette via . */ :root{ --homebar-h: 56px; --maxw: 1500px; --gutter: 24px; --gutter-lg: 64px; --food-deep: #b11226; --food-red: #e6392f; --food-orange:#f08a24; --food-gold: #ffb000; --food-yellow:#ffd26a; --skin-cream: #e8c1b2; --skin-milk: #e8ccc0; --skin-wash: #ebb79d; --skin-peach: #de9579; --radius-lg: 22px; --radius: 16px; --space-1: 10px; --space-2: 16px; --space-3: 22px; --space-4: 30px; --space-5: 24px; --space-6: 32px; --dur: 120ms; --ease-soft: cubic-bezier(.2,.8,.2,1); --ease-cushion: cubic-bezier(.16,1,.3,1); --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-soft: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --header-h: 0px; } /* ----------------------------- HOME (Index) -------------------------------- */ html[data-app="home"], body[data-app="home"]{ --ink:#f4efe7; --muted:#d0c7bb; --border: #b8b8c0; --card: #3d3d43; --card-bg: linear-gradient(180deg, #75757f, #3d3d43 ); --showall-bg: linear-gradient(180deg, #7f7f89, #47474d ); --showall-border: #c7c7d1; --accent-soft: #595962; --homebar-bg: linear-gradient(180deg, #6a6a74, #3d3d43 ); --homebar-border: #8f8f99; --banner-pill-bg: linear-gradient(90deg, #3e3e45 0%, #56565f 20%, #7a7a86 50%, #56565f 80%, #3e3e45 100% ); --banner-pill-solid: #7a7a86; --banner-pill-ink: #f4efe7; --banner-pill-border: #b8b8c0; --auth-flyout-bg: var(--banner-pill-bg); --scroll-track: #4c4c54; --scroll-thumb: #c2b8aa; --scroll-thumb-hover: #d6ccbf; --food-deep: #b11226; --food-red:#e6392f; --food-orange:#f08a24; --food-gold:#ffb000; --food-yellow:#ffd26a; --skin-cream:#f3e3d2; --skin-milk:#f0dfd5; --skin-wash:#ffd2b8; --skin-peach:#f7b18f; --page-bg: linear-gradient(90deg, var(--food-deep) 0%, var(--food-orange) 18%, var(--food-gold) 34%, var(--food-yellow) 50%, var(--skin-cream) 50%, var(--skin-milk) 70%, var(--skin-wash) 86%, var(--skin-peach) 100% ); } /* ----------------------------- FOOD SYSTEM -------------------------------- */ html[data-app="food"], body[data-app="food"]{ --bg: #b11226; --bg-2: #e6392f; --bg-3: #ffb000; --card: rgba(255,176,0,0.14); --ink: #1b0b09; --muted: #3b1a13; --accent: #e6392f; --accent-2: #5a0c15; --accent-3: #f08a24; --accent-4: #ffd26a; --accent-soft: rgba(255,210,106,0.28); --border: rgba(27,11,9,0.18); --border-2: rgba(27,11,9,0.26); --ring: rgba(255,210,106,0.52); --shadow: 0 18px 46px rgba(0,0,0,0.16); --shadow-soft: 0 12px 30px -22px rgba(194,31,43,0.26); --glow: 0 0 0 3px rgba(255,210,106,0.18); --glow-soft: 0 16px 34px -28px rgba(240,138,36,0.26); --tip-bg: rgba(90,12,21,0.95); --tip-ink: #ffe8bf; --tip-border: rgba(255,210,106,0.32); --link: #b11c2a; --link-hover:#7a1a21; --scroll-track: rgba(255,210,106,0.34); --scroll-thumb: rgba(90,12,21,0.58); --scroll-thumb-hover: rgba(90,12,21,0.74); --header-gradient: linear-gradient(90deg, var(--bg) 0%, var(--accent-3) 18%, var(--bg-3) 34%, var(--accent-4) 50%, var(--bg-3) 66%, var(--accent-3) 82%, var(--bg) 100% ); --page-bg: linear-gradient(90deg, var(--bg) 0%, var(--accent-3) 18%, var(--bg-3) 34%, var(--accent-4) 50%, var(--bg-3) 66%, var(--accent-3) 82%, var(--bg) 100% ); --card-bg: linear-gradient(180deg, rgba(255,210,106,0.96), rgba(240,138,36,0.26) ); --filter-bg: linear-gradient(180deg, rgba(255,210,106,0.60), rgba(240,138,36,0.18) ); --showall-bg: linear-gradient(180deg, rgba(255,210,106,0.42), rgba(240,138,36,0.16) ); --showall-border: rgba(200,100,50,0.22); --homebar-bg: var(--header-gradient); --homebar-border: #8c3a16; --banner-pill-bg: var(--header-gradient); --banner-pill-solid: #ffb000; --banner-pill-ink: #1b0b09; --banner-pill-border: #8c3a16; --auth-flyout-bg: var(--banner-pill-bg); } /* ----------------------------- SKIN SYSTEM -------------------------------- */ html[data-app="skin"], body[data-app="skin"]{ --skin-deep: #b8644d; --skin-peach: #cf8167; --skin-wash: #dc9f88; --skin-milk: #e1ad9b; --skin-cream: #e8c1b2; --skin-page-gradient: linear-gradient(90deg, var(--skin-deep) 0%, var(--skin-peach) 10%, var(--skin-wash) 24%, var(--skin-milk) 38%, var(--skin-cream) 48%, var(--skin-cream) 52%, var(--skin-milk) 62%, var(--skin-wash) 76%, var(--skin-peach) 90%, var(--skin-deep) 100% ); --bg: var(--skin-cream); --bg-2: var(--skin-wash); --bg-3: var(--skin-milk); --card: rgba(122,74,58,0.03); --ink: #2b2b28; --muted: #5f514b; --accent: #cf7b61; --accent-2: #6b463b; --accent-3: #dfa38e; --accent-4: #efd2c5; --accent-soft: rgba(239,210,197,0.84); --border: rgba(122,74,58,0.12); --border-2: rgba(188,95,70,0.16); --ring: rgba(188,95,70,0.18); --shadow: 0 18px 46px rgba(0,0,0,0.08); --shadow-soft: 0 12px 30px -22px rgba(122,74,58,0.14); --glow: 0 26px 64px -46px rgba(122,74,58,0.18); --glow-soft: 0 0 0 3px rgba(188,95,70,0.06); --tip-bg: rgba(43,43,40,0.94); --tip-ink: #fff0e8; --tip-border: rgba(122,74,58,0.14); --link: #6b463b; --link-hover:#4f342c; --scroll-track: rgba(239,210,197,0.52); --scroll-thumb: rgba(122,74,58,0.24); --scroll-thumb-hover: rgba(122,74,58,0.34); --header-gradient: var(--skin-page-gradient); --page-bg: var(--skin-page-gradient); --card-bg: linear-gradient(180deg, rgba(239,210,197,0.96), rgba(223,163,142,0.72) ); --filter-bg: linear-gradient(180deg, rgba(239,210,197,0.90), rgba(223,163,142,0.34) ); --showall-bg: linear-gradient(180deg, rgba(239,210,197,0.92), rgba(223,163,142,0.30) ); --showall-border: rgba(122,74,58,0.12); --homebar-bg: var(--skin-page-gradient); --homebar-border: #a15a43; --banner-pill-bg: var(--skin-page-gradient); --banner-pill-solid: var(--skin-cream); --banner-pill-ink: #2b2b28; --banner-pill-border: #a15a43; --auth-flyout-bg: var(--banner-pill-bg); } /* ----------------------------- BADMINTON SYSTEM -------------------------------- */ html[data-app="badminton"], body[data-app="badminton"]{ --bg: #6a1fb3; --bg-2: #c29cff; --bg-3: #f08b2f; --bg-4: #ffd76c; --card: rgba(106,31,179,0.10); --ink: #34164a; --muted: #6d4a74; --accent: #6a1fb3; --accent-2: #4f197d; --accent-3: #f08b2f; --accent-4: #ffd76c; --accent-soft: rgba(244,229,255,0.72); --border: rgba(106,31,179,0.22); --border-2: rgba(106,31,179,0.34); --border-strong: rgba(106,31,179,0.30); --ring: rgba(194,156,255,0.42); --shadow: 0 18px 46px rgba(74,23,116,0.18); --shadow-soft: 0 20px 42px -30px rgba(74,23,116,0.48); --glow: 0 26px 64px -46px rgba(106,31,179,0.34); --glow-soft: 0 0 0 3px rgba(194,156,255,0.14); --tip-bg: rgba(52,22,74,0.96); --tip-ink: #fff7ef; --tip-border: rgba(194,156,255,0.28); --link: #4f197d; --link-hover: #34164a; --scroll-track: rgba(53,22,67,0.18); --scroll-thumb: rgba(106,31,179,0.56); --scroll-thumb-hover: rgba(79,25,125,0.72); --header-gradient: linear-gradient(90deg, #5a189c 0%, #b184f4 18%, #e27f2d 36%, #f3c95a 50%, #e27f2d 64%, #b184f4 82%, #5a189c 100% ); --page-bg: linear-gradient(90deg, #6a1fb3 0%, #c29cff 18%, #f08b2f 36%, #ffd76c 50%, #f08b2f 64%, #c29cff 82%, #6a1fb3 100% ); --surface-card: linear-gradient(180deg, rgba(244,229,255,0.98), rgba(234,211,249,0.94) ); --surface-panel: linear-gradient(180deg, rgba(250,244,255,0.88), rgba(239,224,249,0.82) ); --surface-panel-strong: linear-gradient(180deg, rgba(247,238,255,0.94), rgba(231,207,246,0.88) ); --surface-control: linear-gradient(180deg, rgba(255,251,255,0.96), rgba(244,232,255,0.90) ); --surface-chip: linear-gradient(180deg, rgba(255,251,255,0.90), rgba(240,222,252,0.86) ); --card-bg: var(--surface-card); --filter-bg: var(--surface-panel); --showall-bg: var(--surface-control); --showall-border: rgba(106,31,179,0.22); --homebar-bg: var(--header-gradient); --homebar-border: #8b55d6; --banner-pill-bg: var(--header-gradient); --banner-pill-solid: #5a189c; --banner-pill-ink: #34164a; --banner-pill-border: #8b55d6; --auth-flyout-bg: var(--banner-pill-bg); } /* ----------------------------- FITNESS SYSTEM -------------------------------- */ html[data-app="fitness"], body[data-app="fitness"]{ --bg: #000000; --bg-2: #100f12; --bg-3: #221216; --burgundy: #45151d; --card: rgba(255,255,255,0.07); --ink: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.68); --accent: var(--food-deep); --accent-2: rgba(255,255,255,0.92); --accent-3: #b11226; --accent-4: #e6392f; --accent-soft: rgba(143,15,31,0.20); --border: rgba(255,255,255,0.14); --border-2: rgba(255,255,255,0.22); --ring: rgba(143,15,31,0.35); --shadow: 0 18px 46px rgba(0,0,0,0.55); --shadow-soft: 0 12px 30px -22px rgba(0,0,0,0.50); --glow: 0 26px 64px -46px rgba(143,15,31,0.55); --glow-soft: 0 0 0 3px rgba(143,15,31,0.12); --tip-bg: rgba(0,0,0,0.92); --tip-ink: rgba(255,255,255,0.92); --tip-border: rgba(255,255,255,0.18); --link: rgba(255,255,255,0.92); --link-hover: rgba(255,210,106,0.92); --scroll-track: rgba(255,255,255,0.10); --scroll-thumb: rgba(255,255,255,0.22); --scroll-thumb-hover: rgba(255,255,255,0.32); --header-gradient: linear-gradient(90deg, #000000 0%, #181116 12%, #45151d 28%, #7a1828 42%, var(--food-deep) 50%, #7a1828 58%, #45151d 72%, #181116 88%, #000000 100% ); --page-bg: linear-gradient(90deg, #000000 0%, #100f12 8%, #221216 18%, #45151d 30%, #701725 40%, #9b1a2d 47%, var(--food-deep) 50%, #9b1a2d 53%, #701725 60%, #45151d 70%, #221216 82%, #100f12 92%, #000000 100% ); --card-bg: #10090d; --filter-bg: #160d12; --showall-bg: #1d1016; --showall-border: rgba(255,255,255,0.18); --homebar-bg: var(--header-gradient); --homebar-border: #7f2232; --banner-pill-bg: var(--header-gradient); --banner-pill-solid: #45151d; --banner-pill-ink: #f4efe7; --banner-pill-border: #7f2232; --auth-flyout-bg: var(--banner-pill-bg); } body[data-app="skin"]::before, body[data-app="skin"]::after{ content: none !important; display: none !important; } html[data-app="food"], body[data-app="food"], html[data-app="skin"], body[data-app="skin"], html[data-app="badminton"], body[data-app="badminton"], html[data-app="fitness"], body[data-app="fitness"], html[data-app="massage"], body[data-app="massage"], html[data-app="games"], body[data-app="games"]{ background: var(--page-bg); background-attachment: fixed; background-size: 100% 100%; } /* Home page background is defined in index.html for pixel-precise control. */ /* ----------------------------- GAMES HUB -------------------------------- */ html[data-app="games"], body[data-app="games"]{ --games-brown-deep:#63452f; --games-brown-mid:#78573d; --games-brown-soft:#8a6648; --games-tan:#9d7858; --games-card:#9b6b49; --games-card-strong:#b48662; --bg: var(--games-tan); --bg-2: var(--games-brown-soft); --bg-3: var(--games-brown-mid); --ink:#24140b; --muted:#442b1b; --accent:#8e684c; --accent-2:#4d2c1d; --accent-3:#b99072; --accent-4:#d8b899; --accent-soft:#cba47e; --border: rgba(38,20,10,0.38); --border-2: rgba(38,20,10,0.52); --ring: rgba(143,104,76,0.28); --shadow: 0 20px 50px rgba(35,20,12,0.30); --shadow-soft: 0 16px 34px -20px rgba(35,20,12,0.44); --glow: 0 24px 60px -42px rgba(75,47,32,0.38); --glow-soft: 0 0 0 3px rgba(143,104,76,0.10); --tip-bg: rgba(47,30,20,0.96); --tip-ink: #f8f1ea; --tip-border: rgba(216,184,153,0.26); --link:#5d3a26; --link-hover:#462818; --scroll-track: rgba(216,184,153,0.38); --scroll-thumb: rgba(70,42,26,0.52); --scroll-thumb-hover: rgba(70,42,26,0.70); --header-gradient: linear-gradient(90deg, #63452f 0%, #76563d 18%, #8a6648 36%, #9d7858 50%, #8a6648 64%, #76563d 82%, #63452f 100% ); --page-bg: var(--header-gradient); --card-bg: linear-gradient(180deg, var(--games-card-strong) 0%, var(--games-card) 100%); --filter-bg: #a77d5e; --showall-bg: #c99a72; --showall-border: rgba(38,20,10,0.34); --homebar-bg: var(--header-gradient); --homebar-border: #7a573f; --banner-pill-bg: var(--header-gradient); --banner-pill-solid: var(--games-tan); --banner-pill-ink: #2f1e14; --banner-pill-border: #7a573f; --auth-flyout-bg: var(--banner-pill-bg); } /* ----------------------------- MASSAGE SYSTEM - Mirrors the current Games Hub warm brown / tan palette. -------------------------------- */ html[data-app="massage"], body[data-app="massage"]{ --games-brown-deep:#63452f; --games-brown-mid:#78573d; --games-brown-soft:#8a6648; --games-tan:#9d7858; --games-card:#9b6b49; --games-card-strong:#b48662; --bg: var(--games-tan); --bg-2: var(--games-brown-soft); --bg-3: var(--games-brown-mid); --ink:#24140b; --muted:#442b1b; --accent:#8e684c; --accent-2:#4d2c1d; --accent-3:#b99072; --accent-4:#d8b899; --accent-soft:#cba47e; --border: rgba(38,20,10,0.38); --border-2: rgba(38,20,10,0.52); --ring: rgba(143,104,76,0.28); --shadow: 0 20px 50px rgba(35,20,12,0.30); --shadow-soft: 0 16px 34px -20px rgba(35,20,12,0.44); --glow: 0 24px 60px -42px rgba(75,47,32,0.38); --glow-soft: 0 0 0 3px rgba(143,104,76,0.10); --tip-bg: rgba(47,30,20,0.96); --tip-ink: #f8f1ea; --tip-border: rgba(216,184,153,0.26); --link:#5d3a26; --link-hover:#462818; --scroll-track: rgba(216,184,153,0.38); --scroll-thumb: rgba(70,42,26,0.52); --scroll-thumb-hover: rgba(70,42,26,0.70); --header-gradient: linear-gradient(90deg, #63452f 0%, #76563d 18%, #8a6648 36%, #9d7858 50%, #8a6648 64%, #76563d 82%, #63452f 100% ); --page-bg: var(--header-gradient); --card-bg: linear-gradient(180deg, var(--games-card-strong) 0%, var(--games-card) 100%); --filter-bg: #a77d5e; --showall-bg: #c99a72; --showall-border: rgba(38,20,10,0.34); --homebar-bg: var(--header-gradient); --homebar-border: #7a573f; --banner-pill-bg: var(--header-gradient); --banner-pill-solid: var(--games-tan); --banner-pill-ink: #2f1e14; --banner-pill-border: #7a573f; --auth-flyout-bg: var(--banner-pill-bg); } /* BASELINE-SOLID-SURFACE-TOKENS-20260527 */ html[data-app="food"],body[data-app="food"]{--bl-surface-card-solid:#f5b84a;--bl-surface-recipe-card-solid:#ffc04d;--bl-surface-panel-solid:#e98225;--bl-surface-control-solid:#ee942d;--bl-surface-input-solid:#ffb13b;--bl-surface-active-solid:#c92727;} html[data-app="skin"],body[data-app="skin"]{--bl-surface-card-solid:#d99a82;--bl-surface-recipe-card-solid:#d89178;--bl-surface-panel-solid:#c87962;--bl-surface-control-solid:#cf8167;--bl-surface-input-solid:#e0aa94;--bl-surface-active-solid:#b8644d;} html[data-app="massage"],body[data-app="massage"]{--bl-surface-card-solid:#aa7854;--bl-surface-recipe-card-solid:#b98159;--bl-surface-panel-solid:#b7855f;--bl-surface-control-solid:#b98159;--bl-surface-input-solid:#875d40;--bl-surface-active-solid:#c58d62;} html[data-app="fitness"],body[data-app="fitness"]{--bl-surface-card-solid:#130b10;--bl-surface-recipe-card-solid:#1d1016;--bl-surface-panel-solid:#1d1016;--bl-surface-control-solid:#701725;--bl-surface-input-solid:#2a1118;--bl-surface-active-solid:#9b1a2d;} html[data-app="badminton"],body[data-app="badminton"]{--bl-surface-card-solid:#efdcfb;--bl-surface-recipe-card-solid:#e7cff6;--bl-surface-panel-solid:#e1c4f4;--bl-surface-control-solid:#d7b7ee;--bl-surface-input-solid:#efdcfb;--bl-surface-active-solid:#c29cff;} html[data-app="games"],body[data-app="games"]{--bl-surface-card-solid:#a5714d;--bl-surface-recipe-card-solid:#b9825c;--bl-surface-panel-solid:#b9825c;--bl-surface-control-solid:#bd875f;--bl-surface-input-solid:#7f5538;--bl-surface-active-solid:#d1a67e;} html[data-app="home"],body[data-app="home"]{--bl-home-account-gradient:linear-gradient(90deg,#2f3035 0%,#50515a 30%,#757680 50%,#50515a 70%,#2f3035 100%);} /* END BASELINE-SOLID-SURFACE-TOKENS-20260527 */