/* FunSpace theme tokens — the ONLY place colours are defined.
   Light = darker beige sketchbook. Dark = night sky with stars.
   Load this file first. Theme is set on <html data-theme="light|dark">;
   with no choice saved, the visitor's system setting decides. */

:root {
  /* Stacking layers. Page content stays at or below 50, so it can never cover the header. */
  --z-content: 1;
  --z-header:  100;  /* sticky header, mobile bottom bar */
  --z-popover: 200;  /* account menu, search, wallet menu */
  --z-modal:   300;  /* dialogs, sheets, toasts */
  --header-h:  72px;   /* sticky header height, for anchor scrolling */
  color-scheme: light;
  --paper:       #E2D3B8;  /* page: darker beige / kraft sketchbook */
  --paper-dot:   #CDBB9C;  /* 24px dot grid */
  --card:        #F2E9D8;  /* cards, inputs, panels */
  --card-2:      #EADFC9;  /* nested surfaces, table stripes */
  --ink:         #2A241D;  /* text, borders, hard shadows   10.4:1 on paper */
  --soft:        #564C40;  /* body copy                       5.7:1 */
  --muted:       #62584B;  /* captions, timestamps            4.7:1 */
  --accent:      #A02E26;  /* marker red: one main action     4.9:1 on paper */
  --accent-hover:#86251F;
  --on-accent:   #FFF8F0;  /*                                  6.8:1 on red */
  --blue:        #2A5596;  /* links, focus                    5.0:1 */
  --note:        #F3DC86;  /* post-it, always with ink border; ink on it 11.3:1 */
  --gold:        #E2B93B;  /* FSp coin icon only */
  --sage:        #7E9A7E;  /* small success details */
  --shadow:      #2A241D;  /* hard offset shadows */
  --line-soft:   rgba(42,36,29,.22);
  --overlay:     rgba(42,36,29,.45);
  --polaroid:    #F7F1E4;  /* polaroid border around artwork */
  --artboard:    #FAF5EC;  /* the drawing page, same in both themes (no white flash at night) */
  --note-ink:    #2A241D;  /* text on the post-it, both themes */
  --note-accent: #A02E26;  /* red button on a post-it, both themes */
  --note-on-accent: #FFF8F0;
  --on-sage:     #14110D;  /* numbers on sage badges */
  --page-image:
    url("assets/sketch-decor-light.svg"),
    radial-gradient(var(--paper-dot) 1.2px, transparent 1.3px),
    url("assets/paper-grain.svg");
  --page-image-size: 100vw 100vh, 24px 24px, 300px 300px;
  --page-image-pos: center, 0 0, 0 0;
  --page-image-repeat: no-repeat, repeat, repeat;
}

/* Shapes, type and shadow offsets (not colours, but they live here so no other
   stylesheet needs a :root block). Shadows and tape take their colour from the tokens above. */
:root {
  --shadow-sm: 4px 4px 0 var(--shadow); --shadow-lg: 6px 6px 0 var(--shadow);
  --shadow-card: 5px 5px 0 var(--shadow); --shadow-plate: 8px 8px 0 var(--shadow);
  --wob1: 255px 15px 225px 15px/15px 225px 15px 255px; --wob2: 15px 225px 15px 255px/225px 15px 255px 15px;
  --wob-card: 225px 25px 205px 30px/30px 205px 25px 225px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --hand: 'Kalam', 'Patrick Hand', 'Comic Sans MS', cursive;
  --sans: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --nav: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --tape: color-mix(in srgb, var(--note) 78%, transparent);
}

/* Dark values, written once and reused by both selectors below */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:       #0D1026;  /* night sky top */
  --paper-2:     #1E1A4A;  /* night sky bottom */
  --paper-dot:   transparent;
  --card:        #1A1D3D;  /* dark navy paper */
  --card-2:      #23264A;
  --ink:         #F1E8D6;  /* cream ink                      13.4:1 on card */
  --soft:        #C9C3DA;  /*                                  9.6:1 */
  --muted:       #A8A2C0;  /*                                  6.7:1 */
  --accent:      #FF7A66;  /* coral                            6.4:1 on card */
  --accent-hover:#FF917F;
  --on-accent:   #0D1026;  /*                                  7.4:1 on coral */
  --blue:        #A9C2F5;
  --note:        #F3DC86;  /* post-it stays bright; text on it uses --note-ink */
  --gold:        #E2B93B;
  --sage:        #9FBF9F;
  --shadow:      #05060F;
  --line-soft:   rgba(241,232,214,.22);
  --overlay:     rgba(5,6,15,.6);
  --polaroid:    #F1E8D6;
  --page-image:
    url("assets/sketch-decor-dark.svg"),
    url("assets/stars-twinkle.svg"),
    url("assets/stars-medium.svg"),
    url("assets/stars-small.svg"),
    linear-gradient(180deg, var(--paper) 0%, #141640 55%, var(--paper-2) 100%);
  --page-image-size: 100vw 100vh, 1400px 1100px, 900px 900px, 520px 520px, 100% 100%;
  --page-image-pos: center, 0 0, 120px 60px, 0 0, 0 0;
  --page-image-repeat: no-repeat, repeat, repeat, repeat, no-repeat;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#0D1026; --paper-2:#1E1A4A; --paper-dot:transparent; --card:#1A1D3D; --card-2:#23264A;
    --ink:#F1E8D6; --soft:#C9C3DA; --muted:#A8A2C0; --accent:#FF7A66; --accent-hover:#FF917F; --on-accent:#0D1026;
    --blue:#A9C2F5; --note:#F3DC86; --gold:#E2B93B; --sage:#9FBF9F; --shadow:#05060F;
    --line-soft:rgba(241,232,214,.22); --overlay:rgba(5,6,15,.6); --polaroid:#F1E8D6;
    --page-image: url("assets/sketch-decor-dark.svg"), url("assets/stars-twinkle.svg"), url("assets/stars-medium.svg"), url("assets/stars-small.svg"), linear-gradient(180deg,#0D1026 0%,#141640 55%,#1E1A4A 100%);
    --page-image-size: 100vw 100vh, 1400px 1100px, 900px 900px, 520px 520px, 100% 100%;
    --page-image-pos: center, 0 0, 120px 60px, 0 0, 0 0;
    --page-image-repeat: no-repeat, repeat, repeat, repeat, no-repeat;
  }
}

/* The page background lives on BOTH html and body, from the tokens.
   (The old bug: body.night changed the tokens but html kept painting beige.) */
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--page-image);
  background-size: var(--page-image-size);
  background-position: var(--page-image-pos);
  background-repeat: var(--page-image-repeat);
  background-attachment: fixed;
  min-height: 100vh;
}
/* Text that sits on the post-it is always dark, in both themes */
.note, [data-surface="note"] { background: var(--note); color: var(--note-ink); }

/* Twinkle: an extra star layer that slowly fades in and out (dark theme only).
   Add <div class="fs-twinkle" aria-hidden="true"></div> as the first child of <body>.
   It sits at z-index -1 inside body's own stacking context (isolation), so it paints
   above the page background and below every piece of content, whatever its z-index. */
body { isolation: isolate; }
.fs-twinkle {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/stars-twinkle.svg") 600px 300px / 1400px 1100px repeat;
  opacity: 0; display: none;
}
:root[data-theme="dark"] .fs-twinkle { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fs-twinkle { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .fs-twinkle { animation: fs-twinkle 6s ease-in-out infinite alternate; }
}
@keyframes fs-twinkle { from { opacity: 0; } to { opacity: .9; } }

/* Hide the margin doodles where they would sit under content (the page is ~1210 px wide) */
@media (max-width: 1499px) {
  :root { --page-image-size: 0 0, 24px 24px, 300px 300px; }
  :root[data-theme="dark"] { --page-image-size: 0 0, 1400px 1100px, 900px 900px, 520px 520px, 100% 100%; }
}
@media (max-width: 1499px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page-image-size: 0 0, 1400px 1100px, 900px 900px, 520px 520px, 100% 100%; }
}