/* Color modes apply throughout the site, independently of profile moods. */
:root{--on-accent:#fff}
html[data-theme=dark]{--on-accent:#18132b}
html[data-theme=ocean]{color-scheme:light;--page:#e9f5fa;--surface:#fff;--ink:#13364a;--line:#c7dfe9;--muted:#486879;--accent:#00748a;--soft:#def1f5;--on-accent:#fff}
html[data-theme=sunset]{color-scheme:light;--page:#fff0e9;--surface:#fffaf7;--ink:#492536;--line:#edcfd0;--muted:#815566;--accent:#b73b64;--soft:#fbe2ea;--on-accent:#fff}
html[data-theme=forest]{color-scheme:light;--page:#eaf4ee;--surface:#fcfffd;--ink:#173c2b;--line:#c7decf;--muted:#4d6d5b;--accent:#16734b;--soft:#dceee3;--on-accent:#fff}
html[data-theme=midnight]{color-scheme:dark;--page:#0c1026;--surface:#171e3b;--ink:#f1f3ff;--line:#344164;--muted:#b3c0df;--accent:#bca6ff;--soft:#2d2852;--on-accent:#17102d}
html[data-theme] .mark,html[data-theme] .primary,html[data-theme] .nav button.active,html[data-theme] .unread,html[data-theme] .nav-badge{background:var(--accent);color:var(--on-accent)}
html[data-theme] .mark,html[data-theme] .nav button.active{box-shadow:none}
html[data-theme] .welcome{background:var(--accent);color:var(--on-accent)}
html[data-theme] .welcome p{color:var(--on-accent)}
html[data-theme] .quote{background:var(--soft);color:var(--ink)}
html[data-theme] .quote small,html[data-theme] .actions button{color:var(--muted)}
html[data-theme] .actions button.liked{color:var(--accent)}
html[data-theme] .community-profile .circle{outline-color:var(--accent)}
html[data-theme] .post p em{color:var(--accent)}
html[data-theme] .compose textarea::placeholder{color:var(--muted)}

/* Theme variables also reach sign-in, age checks, and legal pages. */
html[data-theme=light]{color-scheme:light;--page:#edf0f6;--surface:#fff;--ink:#172238;--line:#dfe5ef;--muted:#63718a;--accent:#6448ef;--soft:#eeebff;--on-accent:#fff}
html[data-theme=dark]{color-scheme:dark;--page:#111522;--surface:#1b2031;--line:#303a50;--ink:#eef1ff;--muted:#aebbd1;--accent:#ad9bff;--soft:#302a50;--on-accent:#18132b}
html[data-theme] body{background:var(--page);color:var(--ink)}
html[data-theme] a{color:var(--accent)}
html[data-theme] .security-signin{background:var(--accent);color:var(--on-accent)}
html[data-theme] .circle{background:var(--soft);color:var(--accent)}
html[data-theme] .age-badge{background:var(--accent);color:var(--on-accent)}
html[data-theme] .birth-wheel{background:linear-gradient(to bottom,transparent 88px,var(--soft) 88px,var(--soft) 132px,transparent 132px)}
html[data-theme] .birth-wheel:focus-visible{outline-color:var(--accent)}
html[data-theme] :focus-visible{outline-color:var(--accent)}