/* ========================================================================= Three aesthetics — switched via [data-theme] on Each theme defines the same variables so every component reads them. ========================================================================= */ :root { --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 24px 60px -20px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.4); --t-fast: 120ms cubic-bezier(.2,.6,.2,1); --t-base: 220ms cubic-bezier(.2,.6,.2,1); --density-row: 76px; --density-pad: 28px; } /* ---------- A. FOUNDRY — editorial, warm dark, serif display ---------- */ body[data-theme="foundry"] { --bg: #15110d; --bg-elev: #1b1612; --bg-elev-2: #221c17; --bg-sunken: #110d09; --line: rgba(232, 220, 200, .10); --line-strong: rgba(232, 220, 200, .22); --fg: #f4ecdb; /* 14.8:1 */ --fg-mute: #d4c6a8; /* 9.4:1 body-safe */ --fg-dim: #ad9f80; /* 5.6:1 meets AA for normal text */ --accent: #e6b76b; /* 8.4:1 on bg */ --accent-fg: #15110d; --accent-soft: rgba(230,183,107,.18); --danger: #ef8a72; /* 6.1:1 */ --ok: #b0c787; /* 8.0:1 */ --private: #c9b8ff; /* 9.1:1 */ --font-display: Verdana, Geneva, Tahoma, sans-serif; --font-body: Verdana, Geneva, Tahoma, sans-serif; --font-mono: Consolas, "Courier New", Courier, monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; background: radial-gradient(1200px 800px at 80% -10%, rgba(214,162,90,.06), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(167,139,250,.04), transparent 60%), var(--bg); } /* ---------- B. CONSOLE — terminal, phosphor green, mono everywhere ---------- */ body[data-theme="console"] { --bg: #000000; --bg-elev: #060806; --bg-elev-2: #0a0d0a; --bg-sunken: #000000; --line: rgba(140, 240, 165, .18); --line-strong: rgba(140, 240, 165, .36); --fg: #d6f9dc; /* 17:1 */ --fg-mute: #a0e2ad; /* 10.6:1 */ --fg-dim: #79c188; /* 6.4:1 meets AA */ --accent: #8cf0a5; /* 13.6:1 */ --accent-fg: #001306; --accent-soft: rgba(140, 240, 165, .14); --danger: #ff9494; /* 7.7:1 */ --ok: #8cf0a5; --private: #ffc98a; /* 11.4:1 */ --font-display: Consolas, "Courier New", Courier, monospace; --font-body: Consolas, "Courier New", Courier, monospace; --font-mono: Consolas, "Courier New", Courier, monospace; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; background: repeating-linear-gradient( 0deg, rgba(94, 232, 122, .025) 0px, rgba(94, 232, 122, .025) 1px, transparent 1px, transparent 3px ), var(--bg); } body[data-theme="console"] *::selection { background: var(--accent); color: var(--accent-fg); } /* ---------- C. STUDIO — modern app, cool neutral dark, violet accent ---------- */ /* ---------- LIGHT scheme overrides ---------- */ body[data-scheme="light"][data-theme="foundry"] { --bg: #f7f1e3; --bg-elev: #efe7d3; --bg-elev-2: #e6dcc4; --bg-sunken: #fbf6ea; --line: rgba(48, 32, 16, .12); --line-strong: rgba(48, 32, 16, .25); --fg: #1a1308; /* 16:1 */ --fg-mute: #4a3a22; /* 9.2:1 */ --fg-dim: #6b5a3c; /* 5.2:1 */ --accent: #8a5a14; /* 6.8:1 — deeper brass */ --accent-fg: #fbf6ea; --accent-soft: rgba(138,90,20,.14); --danger: #a8341e; --ok: #4e6b2a; --private: #5a37c4; background: radial-gradient(1200px 800px at 80% -10%, rgba(138,90,20,.06), transparent 60%), var(--bg); } body[data-scheme="light"][data-theme="console"] { --bg: #f4fef6; --bg-elev: #eafaed; --bg-elev-2: #def6e3; --bg-sunken: #ffffff; --line: rgba(20, 90, 40, .22); --line-strong: rgba(20, 90, 40, .42); --fg: #06280f; /* 17:1 */ --fg-mute: #155e2a; /* 8.4:1 */ --fg-dim: #2d7d44; /* 5.0:1 */ --accent: #117a30; /* 6.5:1 */ --accent-fg: #f4fef6; --accent-soft: rgba(17,122,48,.14); --danger: #a8341e; --ok: #117a30; --private: #8a4a00; background: repeating-linear-gradient( 0deg, rgba(17,122,48,.04) 0px, rgba(17,122,48,.04) 1px, transparent 1px, transparent 3px ), var(--bg); } body[data-scheme="light"][data-theme="studio"] { --bg: #f6f7fb; --bg-elev: #ecedf4; --bg-elev-2: #e1e3ee; --bg-sunken: #ffffff; --line: rgba(20, 26, 48, .10); --line-strong: rgba(20, 26, 48, .22); --fg: #11131c; /* 16:1 */ --fg-mute: #3b4061; /* 8.6:1 */ --fg-dim: #5b6079; /* 5.0:1 */ --accent: #5a4cd0; /* 6.8:1 */ --accent-fg: #f6f7fb; --accent-soft: rgba(90,76,208,.14); --danger: #b22e2e; --ok: #2a7a4f; --private: #8a4a00; background: radial-gradient(1200px 900px at 90% -10%, rgba(90,76,208,.08), transparent 55%), var(--bg); } /* ---------- C. STUDIO — modern app, cool neutral dark, violet accent ---------- */ body[data-theme="studio"] { --bg: #0c0d11; --bg-elev: #14161c; --bg-elev-2: #1c1e26; --bg-sunken: #08090c; --line: rgba(220, 224, 240, .09); --line-strong: rgba(220, 224, 240, .18); --fg: #eef0f7; /* 16:1 */ --fg-mute: #c1c6d9; /* 10.2:1 */ --fg-dim: #969cb3; /* 6.0:1 meets AA */ --accent: #b3a8ff; /* 9.4:1 */ --accent-fg: #0c0d11; --accent-soft: rgba(179,168,255,.18); --danger: #ff9a9a; /* 8.0:1 */ --ok: #8ee0bb; /* 10.6:1 */ --private: #ffc98a; /* 11.0:1 */ --font-display: Verdana, Geneva, Tahoma, sans-serif; --font-body: Verdana, Geneva, Tahoma, sans-serif; --font-mono: Consolas, "Courier New", Courier, monospace; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; background: radial-gradient(1200px 900px at 90% -10%, rgba(139,124,255,.08), transparent 55%), var(--bg); }