/* Site color tokens (--t-*): light/dark palettes, manual overrides and high contrast.
   Shared by app.css and by pages that only need the palette (rjuhsd.school). */
:root {
  --t-bg: #f6f7f3;
  --t-bg2: #ffffff;
  --t-bg3: #e9ede5;
  --t-fg: #202622;
  --t-fg2: #657062;
  --t-fg3: #657062;
  --t-ac: #f75383;
  --t-ac-ink: #ffffff;
  --t-ac2: #e03d6c;
  --t-ac3: #e03d6c;
  --t-bd: #dce2d8;
  --t-bda: #c5cfc0;
  --t-gl: transparent;
  --t-gls: #fdeef3;
  --t-gr: #f75383;
  --t-bgr: none;
  --t-radius: 10px;
  --t-radius-sm: 7px;
  --t-motion: 0.14s;
  --t-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --t-font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ink-shadow: none;
  --mobile-dock-space: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --t-bg: #17191b;
    --t-bg2: #222527;
    --t-bg3: #2b2f31;
    --t-fg: #f4f5f1;
    --t-fg2: #a6adaf;
    --t-fg3: #828b8c;
    --t-ac: #ff6f99;
    --t-ac-ink: #ffffff;
    --t-ac2: #ff8bad;
    --t-ac3: #ff8bad;
    --t-bd: #363a3c;
    --t-bda: #4b5355;
    --t-gls: #332127;
    --t-gr: #ff6f99;
  }
}

/* Manual light/dark override (site-theme.js sets data-theme from the
   "theme" cookie via the preferences page's Theme Preset). Both blocks sit
   outside the media query and key off an attribute selector so they outrank
   the query regardless of actual OS preference or source order. */
:root[data-theme="light"] {
  --t-bg: #f6f7f3;
  --t-bg2: #ffffff;
  --t-bg3: #e9ede5;
  --t-fg: #202622;
  --t-fg2: #657062;
  --t-fg3: #657062;
  --t-ac: #f75383;
  --t-ac-ink: #ffffff;
  --t-ac2: #e03d6c;
  --t-ac3: #e03d6c;
  --t-bd: #dce2d8;
  --t-bda: #c5cfc0;
  --t-gl: transparent;
  --t-gls: #fdeef3;
  --t-gr: #f75383;
}
:root[data-theme="dark"] {
  --t-bg: #17191b;
  --t-bg2: #222527;
  --t-bg3: #2b2f31;
  --t-fg: #f4f5f1;
  --t-fg2: #a6adaf;
  --t-fg3: #828b8c;
  --t-ac: #ff6f99;
  --t-ac-ink: #ffffff;
  --t-ac2: #ff8bad;
  --t-ac3: #ff8bad;
  --t-bd: #363a3c;
  --t-bda: #4b5355;
  --t-gls: #332127;
  --t-gr: #ff6f99;
}

/* High contrast mode (Preferences → Appearance, or OS "increase contrast").
   Darkens/lightens text and borders well past the normal palette and swaps
   the accent for a more AA-compliant shade; background tokens are left
   alone since text/border contrast is what actually hurts readability. */
:root[data-contrast="high"] {
  --t-fg: #000000;
  --t-fg2: #1a1a1a;
  --t-fg3: #000000;
  --t-bd: #3d3d42;
  --t-bda: #19191c;
  --t-ac: #c81855;
  --t-ac2: #a10f43;
  --t-ac3: #a10f43;
}
@media (prefers-contrast: more) {
  :root {
    --t-fg: #000000;
    --t-fg2: #1a1a1a;
    --t-fg3: #000000;
    --t-bd: #3d3d42;
    --t-bda: #19191c;
    --t-ac: #c81855;
    --t-ac2: #a10f43;
    --t-ac3: #a10f43;
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"] {
    --t-fg: #f6f7f3;
    --t-fg2: #f0f0f0;
    --t-fg3: #f6f7f3;
    --t-bd: #9a9aa0;
    --t-bda: #c7c7cc;
    --t-ac: #ffb3c9;
    --t-ac2: #ffd1df;
    --t-ac3: #ffd1df;
  }
  @media (prefers-contrast: more) {
    :root {
      --t-fg: #f6f7f3;
      --t-fg2: #f0f0f0;
      --t-fg3: #f6f7f3;
      --t-bd: #9a9aa0;
      --t-bda: #c7c7cc;
      --t-ac: #ffb3c9;
      --t-ac2: #ffd1df;
      --t-ac3: #ffd1df;
    }
  }
}
:root[data-theme="light"][data-contrast="high"] {
  --t-fg: #000000;
  --t-fg2: #1a1a1a;
  --t-fg3: #000000;
  --t-bd: #3d3d42;
  --t-bda: #19191c;
  --t-ac: #c81855;
  --t-ac2: #a10f43;
  --t-ac3: #a10f43;
}
:root[data-theme="dark"][data-contrast="high"] {
  --t-fg: #f6f7f3;
  --t-fg2: #f0f0f0;
  --t-fg3: #f6f7f3;
  --t-bd: #9a9aa0;
  --t-bda: #c7c7cc;
  --t-ac: #ffb3c9;
  --t-ac2: #ffd1df;
  --t-ac3: #ffd1df;
}

/* Holiday themes (dates in site-theme.js, docs/holiday-themes.md). These sit
   last so they win over the default palettes above; a custom accent set from
   Preferences is an inline style on <html> and still wins over them. Each theme
   has a light palette, a dark palette, and the same dark palette inside the
   prefers-color-scheme query for visitors with no manual light/dark choice. */
/* Halloween: pumpkin orange on deep purple */
:root[data-holiday="halloween"] {
  --t-bg: #fbf3e8; --t-bg2: #fffdf8; --t-bg3: #f1e2cf;
  --t-fg: #2a1f2f; --t-fg2: #7a6477; --t-fg3: #7a6477;
  --t-ac: #c2530a; --t-ac-ink: #ffffff; --t-ac2: #a24408; --t-ac3: #a24408;
  --t-bd: #e8d5bd; --t-bda: #d5bc9a; --t-gls: #fdeadb; --t-gr: #c2530a;
}
:root[data-holiday="halloween"][data-theme="dark"] {
  --t-bg: #15111b; --t-bg2: #1f1829; --t-bg3: #291f36;
  --t-fg: #f6efe6; --t-fg2: #b9a9bd; --t-fg3: #92829a;
  --t-ac: #ff8a1f; --t-ac-ink: #1a1006; --t-ac2: #ffa24d; --t-ac3: #ffa24d;
  --t-bd: #372a47; --t-bda: #503d66; --t-gls: #33210f; --t-gr: #ff8a1f;
}
@media (prefers-color-scheme: dark) {
  :root[data-holiday="halloween"]:not([data-theme="light"]) {
    --t-bg: #15111b; --t-bg2: #1f1829; --t-bg3: #291f36;
    --t-fg: #f6efe6; --t-fg2: #b9a9bd; --t-fg3: #92829a;
    --t-ac: #ff8a1f; --t-ac-ink: #1a1006; --t-ac2: #ffa24d; --t-ac3: #ffa24d;
    --t-bd: #372a47; --t-bda: #503d66; --t-gls: #33210f; --t-gr: #ff8a1f;
  }
}
/* Thanksgiving: warm cream and amber */
:root[data-holiday="thanksgiving"] {
  --t-bg: #faf5ee; --t-bg2: #fffdf9; --t-bg3: #f1e7d8;
  --t-fg: #2a2118; --t-fg2: #7a6853; --t-fg3: #7a6853;
  --t-ac: #b85414; --t-ac-ink: #ffffff; --t-ac2: #9c4410; --t-ac3: #9c4410;
  --t-bd: #e6d9c6; --t-bda: #d3c1a6; --t-gls: #fbeedd; --t-gr: #b85414;
}
:root[data-holiday="thanksgiving"][data-theme="dark"] {
  --t-bg: #1a1714; --t-bg2: #25201b; --t-bg3: #2e2822;
  --t-fg: #f6f1ea; --t-fg2: #b3a794; --t-fg3: #8f8472;
  --t-ac: #f28c38; --t-ac-ink: #1a1208; --t-ac2: #ffa45c; --t-ac3: #ffa45c;
  --t-bd: #3b332b; --t-bda: #544838; --t-gls: #35261a; --t-gr: #f28c38;
}
@media (prefers-color-scheme: dark) {
  :root[data-holiday="thanksgiving"]:not([data-theme="light"]) {
    --t-bg: #1a1714; --t-bg2: #25201b; --t-bg3: #2e2822;
    --t-fg: #f6f1ea; --t-fg2: #b3a794; --t-fg3: #8f8472;
    --t-ac: #f28c38; --t-ac-ink: #1a1208; --t-ac2: #ffa45c; --t-ac3: #ffa45c;
    --t-bd: #3b332b; --t-bda: #544838; --t-gls: #35261a; --t-gr: #f28c38;
  }
}
/* Christmas: evergreen surfaces with red accents */
:root[data-holiday="christmas"] {
  --t-bg: #e9f4ea; --t-bg2: #fbfffb; --t-bg3: #d3e8d5;
  --t-fg: #14281b; --t-fg2: #4f6a58; --t-fg3: #4f6a58;
  --t-ac: #b3151f; --t-ac-ink: #ffffff; --t-ac2: #8f1019; --t-ac3: #8f1019;
  --t-bd: #bcd8c0; --t-bda: #9cc3a2; --t-gls: #fbe1e3; --t-gr: #b3151f;
}
:root[data-holiday="christmas"][data-theme="dark"] {
  --t-bg: #0a1f14; --t-bg2: #112d1d; --t-bg3: #173b26;
  --t-fg: #f6f4ea; --t-fg2: #b4cdb9; --t-fg3: #8fae97;
  --t-ac: #f0494f; --t-ac-ink: #ffffff; --t-ac2: #ff6f74; --t-ac3: #ff6f74;
  --t-bd: #22503a; --t-bda: #33704f; --t-gls: #3a1a1d; --t-gr: #f0494f;
}
@media (prefers-color-scheme: dark) {
  :root[data-holiday="christmas"]:not([data-theme="light"]) {
    --t-bg: #0a1f14; --t-bg2: #112d1d; --t-bg3: #173b26;
    --t-fg: #f6f4ea; --t-fg2: #b4cdb9; --t-fg3: #8fae97;
    --t-ac: #f0494f; --t-ac-ink: #ffffff; --t-ac2: #ff6f74; --t-ac3: #ff6f74;
    --t-bd: #22503a; --t-bda: #33704f; --t-gls: #3a1a1d; --t-gr: #f0494f;
  }
}
/* New Year's: midnight navy and gold */
:root[data-holiday="newyear"] {
  --t-bg: #f6f5fb; --t-bg2: #ffffff; --t-bg3: #e6e4f3;
  --t-fg: #1a1a33; --t-fg2: #5d5c80; --t-fg3: #5d5c80;
  --t-ac: #2d3fa3; --t-ac-ink: #ffffff; --t-ac2: #223087; --t-ac3: #223087;
  --t-bd: #d8d6ec; --t-bda: #bcb9de; --t-gls: #e8ebfa; --t-gr: #2d3fa3;
}
:root[data-holiday="newyear"][data-theme="dark"] {
  --t-bg: #0c1022; --t-bg2: #141a33; --t-bg3: #1c2445;
  --t-fg: #f4f4fb; --t-fg2: #aeb3d4; --t-fg3: #868cb3;
  --t-ac: #f5c451; --t-ac-ink: #1c1403; --t-ac2: #ffd77a; --t-ac3: #ffd77a;
  --t-bd: #283159; --t-bda: #3b4880; --t-gls: #2b2512; --t-gr: #f5c451;
}
@media (prefers-color-scheme: dark) {
  :root[data-holiday="newyear"]:not([data-theme="light"]) {
    --t-bg: #0c1022; --t-bg2: #141a33; --t-bg3: #1c2445;
    --t-fg: #f4f4fb; --t-fg2: #aeb3d4; --t-fg3: #868cb3;
    --t-ac: #f5c451; --t-ac-ink: #1c1403; --t-ac2: #ffd77a; --t-ac3: #ffd77a;
    --t-bd: #283159; --t-bda: #3b4880; --t-gls: #2b2512; --t-gr: #f5c451;
  }
}
/* Valentine's: rose */
:root[data-holiday="valentines"] {
  --t-bg: #fff4f6; --t-bg2: #fffdfd; --t-bg3: #fbe1e7;
  --t-fg: #2e1820; --t-fg2: #80586a; --t-fg3: #80586a;
  --t-ac: #c8265e; --t-ac-ink: #ffffff; --t-ac2: #a31e4d; --t-ac3: #a31e4d;
  --t-bd: #f3cdd7; --t-bda: #e8aebf; --t-gls: #fde3ec; --t-gr: #c8265e;
}
:root[data-holiday="valentines"][data-theme="dark"] {
  --t-bg: #1b1017; --t-bg2: #27161f; --t-bg3: #331c29;
  --t-fg: #fbeff3; --t-fg2: #c4a3b1; --t-fg3: #9d7c8b;
  --t-ac: #ff5d8f; --t-ac-ink: #1f0610; --t-ac2: #ff85ab; --t-ac3: #ff85ab;
  --t-bd: #43232f; --t-bda: #5f3445; --t-gls: #3a1523; --t-gr: #ff5d8f;
}
@media (prefers-color-scheme: dark) {
  :root[data-holiday="valentines"]:not([data-theme="light"]) {
    --t-bg: #1b1017; --t-bg2: #27161f; --t-bg3: #331c29;
    --t-fg: #fbeff3; --t-fg2: #c4a3b1; --t-fg3: #9d7c8b;
    --t-ac: #ff5d8f; --t-ac-ink: #1f0610; --t-ac2: #ff85ab; --t-ac3: #ff85ab;
    --t-bd: #43232f; --t-bda: #5f3445; --t-gls: #3a1523; --t-gr: #ff5d8f;
  }
}

/* Christmas string lights along the top edge, twinkling in two alternating sets. */
html[data-holiday="christmas"]::before,
html[data-holiday="christmas"]::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 9px;
  pointer-events: none; z-index: 2147482999; background-repeat: repeat-x; background-size: 96px 9px;
}
html[data-holiday="christmas"]::before {
  background-image:
    radial-gradient(circle at 12px 5px, #ff3b3b 0 3.2px, rgba(255, 59, 59, .35) 3.2px 5px, transparent 5.4px),
    radial-gradient(circle at 60px 5px, #3fe27a 0 3.2px, rgba(63, 226, 122, .35) 3.2px 5px, transparent 5.4px),
    linear-gradient(rgba(20, 40, 28, .55), rgba(20, 40, 28, .55));
  background-size: 96px 9px, 96px 9px, 100% 1px;
  background-repeat: repeat-x, repeat-x, no-repeat;
  animation: holiday-twinkle-a 2.6s ease-in-out infinite;
}
html[data-holiday="christmas"]::after {
  background-image:
    radial-gradient(circle at 36px 5px, #ffd24a 0 3.2px, rgba(255, 210, 74, .35) 3.2px 5px, transparent 5.4px),
    radial-gradient(circle at 84px 5px, #4aa3ff 0 3.2px, rgba(74, 163, 255, .35) 3.2px 5px, transparent 5.4px);
  animation: holiday-twinkle-b 2.6s ease-in-out infinite;
}
@keyframes holiday-twinkle-a { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes holiday-twinkle-b { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
html.theme-no-motion[data-holiday="christmas"]::before,
html.theme-no-motion[data-holiday="christmas"]::after { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html[data-holiday="christmas"]::before, html[data-holiday="christmas"]::after { animation: none; opacity: 1; }
}

/* Signed-out pages (landing, sign-in): they keep their own --ob-* palette
   instead of the --t-* tokens, so map the holiday palette onto it while a
   holiday is active. onboarding-theme.js sets data-theme from the page's
   light/dark toggle, so the matching light or dark holiday palette is used.
   :root[data-holiday] keeps this above the pages' own html.theme-light rules. */
:root[data-presentation="onboarding"][data-holiday] { background: var(--t-bg); }
:root[data-holiday] body.onboarding-page {
  --ob-bg: var(--t-bg);
  --ob-panel: var(--t-bg2);
  --ob-ink: var(--t-fg);
  --ob-muted: var(--t-fg2);
  --ob-line: var(--t-bd);
  --ob-accent: var(--t-ac);
  --ob-accent-ink: var(--t-ac-ink);
}