/* Maddie Sterling shared theme: used by the public homepage (/) and Maddie Studio (/studio).
   Change fonts, colors and radii here and both update. When her logo's font/colors are final, edit the tokens below. */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root{
  /* type: the logo is drawn shapes, geometric and rounded. Jost is the closest open font (SIL OFL); DM Sans for text */
  --display:"Jost","DM Sans",ui-sans-serif,system-ui,sans-serif;
  --body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* logo colors: Espresso #2A1E19, Sand #F5EEE4, Hoop Gold #C2913F (gold is decorative only, not for words) */
  --bg:#f5eee4; --surface:#fffcf7; --sunk:#ebe2d4; --line:#e0d5c4;
  --ink:#2a1e19; --muted:#6f625a; --faint:#9a8d84;
  --gold:#c2913f; --copper:#8a5a17; --copper-soft:#f1e3cc; --sage:#6f8a78; --sage-soft:#e3eae1;
  --blush:#ecd5c8; --sand:#e8dcc6;
  /* status */
  --good:#2f7d4f; --good-soft:#dcefe2; --warn:#a86a07; --warn-soft:#f6ead2; --bad:#b33a2e; --bad-soft:#f6dcd8;
  /* platforms */
  --ig:#c13584; --tt:#111111; --yt:#d42b2b; --fb:#1f5fd1;
  /* shape */
  --r:14px; --r-lg:22px; --pill:999px;
  /* aliases used by the homepage */
  --serif:var(--display); --sans:var(--body); --mute:var(--muted); --card:var(--surface); --accent:var(--copper);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1b1310; --surface:#251b16; --sunk:#2e231d; --line:#3a2d25;
  --ink:#f5eee4; --muted:#b7a99d; --faint:#85776d;
  --gold:#d9ae62; --copper:#d9ae62; --copper-soft:#3a2b17; --sage:#93b19c; --sage-soft:#22302a;
  --good:#6cc48f; --good-soft:#1c3326; --warn:#e2ac4a; --warn-soft:#3a2f17; --bad:#ec7b6e; --bad-soft:#3d2320;
  --ig:#e06aa9; --tt:#e8ede9; --yt:#f06161; --fb:#6d9bf0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1b1310; --surface:#251b16; --sunk:#2e231d; --line:#3a2d25;
  --ink:#f5eee4; --muted:#b7a99d; --faint:#85776d;
  --gold:#d9ae62; --copper:#d9ae62; --copper-soft:#3a2b17; --sage:#93b19c; --sage-soft:#22302a;
  --good:#6cc48f; --good-soft:#1c3326; --warn:#e2ac4a; --warn-soft:#3a2f17; --bad:#ec7b6e; --bad-soft:#3d2320;
  --ig:#e06aa9; --tt:#e8ede9; --yt:#f06161; --fb:#6d9bf0; color-scheme:dark}
/* logo images: swap to the reversed (light on dark) file in dark mode */
.logo-img{display:block;height:auto}
.logo-img.on-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-img.on-light{display:none}:root:not([data-theme="light"]) .logo-img.on-dark{display:block}}
:root[data-theme="dark"] .logo-img.on-light{display:none}
:root[data-theme="dark"] .logo-img.on-dark{display:block}