/* ============================================================
   tokens.css — the single source of truth for the whole app.
   Every color, size, and space in every page comes from here.
   Change a value here, it changes everywhere. Nothing else
   should ever hardcode a hex value.
   ============================================================ */

:root {
  /* ---- ground & surface -------------------------------- */
  --bg:            #ffffff;   /* page ground */
  --bg-sunken:     #f6f6f4;   /* rails, wells, empty states */
  --surface:       #ffffff;   /* cards sit on this */
  --surface-hover: #fafaf9;

  /* ---- ink --------------------------------------------- */
  --ink:           #16161a;   /* titles */
  --ink-body:      #3f3f46;   /* body copy */
  --ink-muted:     #71717a;   /* meta, tags */
  --ink-faint:     #a1a1aa;   /* timestamps, hints */

  /* ---- line -------------------------------------------- */
  --line:          #e7e7e4;
  --line-strong:   #d4d4d0;

  /* ---- accent ------------------------------------------ */
  --accent:        #1a1a1f;   /* primary button, focus */
  --accent-ink:    #ffffff;
  --live:          #16a34a;   /* someone is in there right now */

  /* ---- space-type hues (carried over — these were right) */
  --home:          #e8a33d;
  --venue:         #14a89a;
  --subroom:       #7c6ff0;
  --scene:         #e8618c;

  /* ---- type -------------------------------------------- */
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  30px;
  --text-3xl:  42px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;

  /* ---- space (4pt base) -------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px;

  /* ---- shape ------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 999px;

  /* ---- elevation --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16,16,20,.06);
  --shadow-md: 0 4px 16px rgba(16,16,20,.08);
  --shadow-lg: 0 12px 40px rgba(16,16,20,.14);

  /* ---- motion ------------------------------------------ */
  --ease: cubic-bezier(.2,.7,.3,1);
  --fast: 120ms;
  --med:  220ms;

  /* ---- layout ------------------------------------------ */
  --shell-h:   56px;   /* persistent top bar */
  --page-max: 1240px;
  --z-drawer: 100;
  --z-sheet:  200;
  --z-modal:  300;

  /* ---- derived surfaces (dark mode re-derives these) ---- */
  --scrim:        rgba(255,255,255,.85);  /* sticky bar wash */
  --scrim-strong: rgba(255,255,255,.94);  /* pills over art */
  --accent-hover: #000000;
  --ink-hover:    #000000;
  --cover-a:      #f6f6f4;                /* empty-cover gradient */
  --cover-b:      #ececea;
  --shadow-color: 16,16,20;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   DARK MODE
   Only tokens are redefined — no component CSS is duplicated.

   Three states, matching how themes actually work:
     1. :root                          -> light (default, above)
     2. prefers-color-scheme: dark     -> follows the OS
     3. [data-theme]                   -> explicit user choice, wins

   The guard on the media query lets an explicit "light" choice
   beat a dark OS setting. Without it the toggle only works one way.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0e0e11;
    --bg-sunken:     #17171b;
    --surface:       #141418;
    --surface-hover: #1b1b20;

    --ink:           #f4f4f5;
    --ink-body:      #c8c8ce;
    --ink-muted:     #8b8b94;
    --ink-faint:     #62626b;

    --line:          #26262c;
    --line-strong:   #35353d;

    /* inverted: on dark, the primary button is the light one */
    --accent:        #f4f4f5;
    --accent-ink:    #0e0e11;
    --accent-hover:  #ffffff;
    --ink-hover:     #ffffff;
    --live:          #34d399;

    /* space hues lifted for contrast on dark */
    --home:          #f0b455;
    --venue:         #2dd4bf;
    --subroom:       #9b8ffa;
    --scene:         #f27ba3;

    --scrim:         rgba(14,14,17,.85);
    --scrim-strong:  rgba(20,20,24,.92);
    --cover-a:       #1a1a1f;
    --cover-b:       #232329;

    --shadow-color:  0,0,0;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:            #0e0e11;
  --bg-sunken:     #17171b;
  --surface:       #141418;
  --surface-hover: #1b1b20;

  --ink:           #f4f4f5;
  --ink-body:      #c8c8ce;
  --ink-muted:     #8b8b94;
  --ink-faint:     #62626b;

  --line:          #26262c;
  --line-strong:   #35353d;

  --accent:        #f4f4f5;
  --accent-ink:    #0e0e11;
  --accent-hover:  #ffffff;
  --ink-hover:     #ffffff;
  --live:          #34d399;

  --home:          #f0b455;
  --venue:         #2dd4bf;
  --subroom:       #9b8ffa;
  --scene:         #f27ba3;

  --scrim:         rgba(14,14,17,.85);
  --scrim-strong:  rgba(20,20,24,.92);
  --cover-a:       #1a1a1f;
  --cover-b:       #232329;

  --shadow-color:  0,0,0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
}

/* let form controls & scrollbars follow the theme */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }