/* Design tokens, light and dark.
 *
 * Loaded before every other stylesheet. Nothing else in the project should
 * hard-code a colour: add a token here instead, so dark mode stays a single
 * place to edit.
 *
 * The dark column is chosen for the dark surface, not flipped from the light
 * one. Every text pair clears WCAG AA against the surface it sits on, and
 * white-on-brand still passes at 5.67:1 so solid brand buttons keep working.
 */

:root {
  color-scheme: light;
  --map: url("https://user-cdn.hackclub-assets.com/01a12afd-8757-7f53-8594-8ac46bef897f/Untitled%20design%20%2891%29.png");
  --timg: url("https://cdn.hackclub.com/01a12ca7-2965-7618-8d35-74817fc77ee3/WhatsApp%20Image%202026-10-12%20at%201.56.02%20AM.jpeg");
  --page:         #fffdfb;
  --surface:      #ffffff;
  --surface-2:    #fdf5ec;
  --surface-3:    #f3ece5;

  --line:         #e6d9cd;
  --line-strong:  #d8c8ba;

  --ink:          #2a1a10;
  --ink-2:        #5d4a3c;
  --ink-soft:     #7a6455;
  --ink-muted:    #898781;

  --brand:        #77431d;   /* solid fills: white text sits on this */
  --brand-ink:    #77431d;   /* text and borders */
  --brand-deep:   #8a3423;
  --brand-press:  #5d3416;
  --on-brand:     #ffffff;

  --good:         #2f7d4f;
  --good-bg:      #f1f8f3;
  --bad:          #b3402f;
  --bad-strong:   #c0392b;
  --bad-bg:       #fdf0ed;
  --bad-line:     #edcfc8;
  --danger-solid: #c0392b;   /* white text sits on this in both modes */
  --good-solid:   #2f7d4f;
  --bad-solid:    #b3402f;

  --accent:       #6c5ce7;

  --titcolor:     #77431d;

  /* Code stays dark in both modes - a light code block in a dark page is
     the thing people complain about most. */
  --code-bg:      #2a1a10;
  --code-ink:     #f3ece5;

  --shadow:       rgba(58, 36, 22, .10);

  /* Surfaces written as rgb(), which the first pass never saw. */
  --page-veil:    rgba(251, 246, 244, .92);
  --auth-panel:   rgb(255, 222, 169);
  --page-pattern: url("https://camo.githubusercontent.com/c42c83df2fd1e442ef1e0ed69cc20d21f65308fc2f0dca2a8035360738d49c8c/68747470733a2f2f7765622e77686174736170702e636f6d2f696d672f62672d636861742d74696c652d6461726b5f61346265353132653731393562366237333364393131306234303866303735642e706e67");
  --page-pattern-tint: rgba(255, 253, 251, .4);
}

/* The OS preference, unless the viewer has stamped a light theme. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --map: url("https://user-cdn.hackclub-assets.com/01a12b07-62b9-7b5c-9a3c-bd80eeb52d4e/Untitled%20design%20%2892%29.png");
    --timg: url("https://cdn.hackclub.com/01a12c81-130b-75cb-92d1-4846c41c4262/WhatsApp%20Image%202026-10-12%20at%201.11.57%20AM.jpeg");

    --page:         #15110e;
    --surface:      #1d1814;
    --surface-2:    #241e18;
    --surface-3:    #2b241d;

    --line:         #3a3029;
    --line-strong:  #4b3f35;

    --ink:          #f6efe8;
    --ink-2:        #d8c8ba;
    --ink-soft:     #b8a695;
    --ink-muted:    #94897f;

    --brand:        #9a5526;
    --brand-ink:    #e3996a;
    --brand-deep:   #e07a5f;
    --brand-press:  #b0652f;
    --on-brand:     #ffffff;

    --good:         #4bbd7a;
    --good-bg:      #16281e;
    --bad:          #f07a68;
    --bad-strong:   #e35c4a;
    --bad-bg:       #2d1a16;
    --bad-line:     #5a2f26;
    --danger-solid: #c0392b;
    --good-solid:   #2f7d4f;
    --bad-solid:    #b3402f;

    --accent:       #8e81f0;

    --code-bg:      #0f0c0a;
    --code-ink:     #e9dccf;

    --shadow:       rgba(0, 0, 0, .45);

    --page-veil:  rgba(21, 17, 14, .92);
    --auth-panel: #3d2c18;
    --page-pattern-tint: rgba(21, 17, 14, .9);
  }
}

/* The explicit choice wins over the OS setting, both ways. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --map: url("https://user-cdn.hackclub-assets.com/01a12b07-62b9-7b5c-9a3c-bd80eeb52d4e/Untitled%20design%20%2892%29.png");
  --timg: url("https://cdn.hackclub.com/01a12c81-130b-75cb-92d1-4846c41c4262/WhatsApp%20Image%202026-10-12%20at%201.11.57%20AM.jpeg");

  --page:         #15110e;
  --surface:      #1d1814;
  --surface-2:    #241e18;
  --surface-3:    #2b241d;

  --line:         #3a3029;
  --line-strong:  #4b3f35;

  --ink:          #f6efe8;
  --ink-2:        #d8c8ba;
  --ink-soft:     #b8a695;
  --ink-muted:    #94897f;

  --brand:        #9a5526;
  --brand-ink:    #e3996a;
  --brand-deep:   #e07a5f;
  --brand-press:  #b0652f;
  --on-brand:     #ffffff;

  --good:         #4bbd7a;
  --good-bg:      #16281e;
  --bad:          #f07a68;
  --bad-strong:   #e35c4a;
  --bad-bg:       #2d1a16;
  --bad-line:     #5a2f26;
  --danger-solid: #c0392b;
  --good-solid:   #2f7d4f;
  --bad-solid:    #b3402f;

  --accent:       #8e81f0;

  --code-bg:      #0f0c0a;
  --code-ink:     #e9dccf;

  --titcolor:     #ffffff;

  --shadow:       rgba(0, 0, 0, .45);

  --page-veil:  rgba(21, 17, 14, .92);
  --auth-panel: #3d2c18;
  --page-pattern-tint: rgba(21, 17, 14, .9);
}


/* The login sign is a fixed light illustration. Anything printed on it keeps
   a light palette in both themes, because the artwork cannot follow one. */
:root {
  --sign-ink:   #2a1a10;
  --sign-soft:  #5d4a3c;
  --sign-brand: #77431d;
  --sign-field: rgb(255, 222, 169);
}


/* ---------- the toggle ---------- */

.theme-toggle {
  position: relative;
  flex: 0 0 3.35rem;
  width: 3.35rem;
  height: 1.8rem;
  display: inline-block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink);
  font: 1rem/1 sans-serif;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--line-strong); }

/* A warm, compact sliding switch with the supplied sun and moon artwork. */
.theme-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  z-index: 1;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 1px 4px var(--shadow);
  transform: translateY(-50%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), background-color .35s ease;
}
.theme-toggle__thumb svg {
  position: absolute;
  width: .95rem;
  height: .95rem;
  transition: opacity .28s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle__light { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle__dark { opacity: 0; transform: rotate(-65deg) scale(.5); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-toggle__thumb {
    background: var(--brand-ink);
    color: var(--page);
    transform: translate(1.75rem, -50%);
  }
  :root:where(:not([data-theme="light"])) .theme-toggle__light { opacity: 0; transform: rotate(65deg) scale(.5); }
  :root:where(:not([data-theme="light"])) .theme-toggle__dark { opacity: 1; transform: rotate(0) scale(1); }
}
:root[data-theme="dark"] .theme-toggle__thumb {
  background: var(--brand-ink);
  color: var(--page);
  transform: translate(1.75rem, -50%);
}
:root[data-theme="dark"] .theme-toggle__light { opacity: 0; transform: rotate(65deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__dark { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle__light { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="light"] .theme-toggle__dark { opacity: 0; transform: rotate(-65deg) scale(.5); }

/* Use the View Transitions API for a circular theme reveal; older browsers
  and reduced-motion users get an immediate, non-animated theme update. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
  z-index: 2;
  animation: theme-reveal .8s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--theme-x, 50vw) var(--theme-y, 50vh)); }
  to { clip-path: circle(150vmax at var(--theme-x, 50vw) var(--theme-y, 50vh)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation-duration: .01ms; }
  .theme-toggle__thumb,
  .theme-toggle__thumb svg { transition: none; }
}