/* ============================================================
   gigbookerai-theme.css — the single source of truth for color.
   Session 29 (2026-07-23). See THEME_PLAN.md.

   Loaded on every page. Defining custom properties changes NOTHING
   on its own — a page only changes when its markup starts consuming
   these variables. That's deliberate: this file can ship safely
   ahead of any conversion work.

   The palette is the agent dashboard's existing dark surfaces,
   promoted to canon. Five different "dark" backgrounds were live
   across the app (#0f172a, #1e293b, #0d1018, #0f1117, #0b1120);
   these replace all of them.

   Pipeline status colors are NOT defined here on purpose. They're
   documented in CLAUDE.md section 7, they already read correctly on
   dark, and they carry meaning users have learned. Do not retheme.
   ============================================================ */

:root {
  /* ── Surfaces ────────────────────────────────────────────── */
  --gb-bg:          #0f1117;   /* page background */
  --gb-surface:     #161925;   /* cards, panels, modals */
  --gb-surface-2:   #1e2230;   /* nested / raised, form inputs */
  --gb-surface-3:   #0d1018;   /* recessed wells, code, preview blocks */
  --gb-overlay:     rgba(2, 6, 23, .72);   /* modal backdrop */

  /* ── Paper ───────────────────────────────────────────────────
     A deliberate LIGHT island inside the dark app: calendar grids.
     Scott's call, and it's the right one -- the pastel status chips
     (Session 18) are dark-text-on-tint and only read on a light cell.
     Treat a calendar like paper on a desk, not like a panel. */
  --gb-paper:        #ffffff;   /* current-month day cell */
  --gb-paper-2:      #9aa5b8;   /* adjacent-month cell — clearly grey against
                                   the white current-month cells, but never
                                   black. Scott asked twice for greyer. */
  --gb-paper-text:   #111827;   /* day numbers on paper */
  --gb-paper-dim:    #2f3849;   /* adjacent-month day numbers — must stay
                                   legible ON the grey cell above, so this is
                                   a dark slate, not a light one. Scott S29. */
  --gb-paper-border: #cbd5e1;

  /* ── Lines ───────────────────────────────────────────────── */
  --gb-border:        #2a3050;
  --gb-border-strong: #3b4266;

  /* ── Text ────────────────────────────────────────────────── */
  --gb-text:        #f1f5f9;   /* primary */
  --gb-text-muted:  #94a3b8;   /* secondary / labels */
  --gb-text-dim:    #64748b;   /* tertiary / hints, timestamps */
  --gb-text-on-brand: #ffffff;

  /* ── Brand + intent ──────────────────────────────────────── */
  --gb-brand:        #6366f1;
  --gb-brand-2:      #8b5cf6;   /* violet — second stop of the brand gradient */
  --gb-brand-hover:  #4f46e5;
  --gb-brand-soft:   rgba(99, 102, 241, .15);
  --gb-ok:           #22c55e;
  --gb-warn:         #f59e0b;
  --gb-danger:       #ef4444;
  --gb-info:         #3b82f6;

  /* ── Alert / callout pairs ───────────────────────────────────
     On light these were pale tint + dark text (#fef3c7 on #78350f).
     That inverts on dark: a translucent wash of the intent color with
     LIGHT text. Never use the pale tints directly on dark — they read
     as a flashlight in the face. */
  --gb-ok-bg:       rgba(34, 197, 94, .13);
  --gb-ok-text:     #86efac;
  --gb-ok-border:   rgba(34, 197, 94, .35);

  --gb-warn-bg:     rgba(245, 158, 11, .13);
  --gb-warn-text:   #fcd34d;
  --gb-warn-border: rgba(245, 158, 11, .35);

  --gb-danger-bg:   rgba(239, 68, 68, .13);
  --gb-danger-text: #fca5a5;
  --gb-danger-border: rgba(239, 68, 68, .35);

  --gb-info-bg:     rgba(59, 130, 246, .13);
  --gb-info-text:   #93c5fd;
  --gb-info-border: rgba(59, 130, 246, .35);

  --gb-brand-text:  #a5b4fc;
  --gb-brand-border: rgba(99, 102, 241, .35);

  /* ── Focus ───────────────────────────────────────────────── */
  --gb-focus-ring:   #818cf8;

  /* ── Radii + elevation ───────────────────────────────────── */
  --gb-radius:       12px;
  --gb-radius-sm:    8px;
  --gb-shadow:       0 20px 60px rgba(0, 0, 0, .5);
}

/* Native controls (date pickers, scrollbars, autofill, select
   dropdowns) follow this. Scoped to .gb-dark on <html> rather than
   :root -- 19 pages are still light, and forcing dark widgets onto a
   white page is a regression, not a fix. Each page gets the class as
   it converts. */
html.gb-dark {
  color-scheme: dark;
}

/* ── Utility layer ─────────────────────────────────────────────
   Lets page conversion be mostly class swaps instead of editing
   thousands of inline styles one at a time. Opt-in: nothing uses
   these until a page is converted. */

.gb-page    { background: var(--gb-bg); color: var(--gb-text); }

.gb-card    { background: var(--gb-surface);
              border: 1px solid var(--gb-border);
              border-radius: var(--gb-radius);
              color: var(--gb-text); }

.gb-card-2  { background: var(--gb-surface-2);
              border: 1px solid var(--gb-border);
              border-radius: var(--gb-radius-sm);
              color: var(--gb-text); }

.gb-well    { background: var(--gb-surface-3);
              border: 1px solid var(--gb-border);
              border-radius: var(--gb-radius-sm); }

.gb-input   { background: var(--gb-surface-2);
              border: 1px solid var(--gb-border);
              border-radius: var(--gb-radius-sm);
              color: var(--gb-text); }
.gb-input::placeholder { color: var(--gb-text-dim); }
.gb-input:focus { outline: none;
                  border-color: var(--gb-focus-ring);
                  box-shadow: 0 0 0 2px var(--gb-brand-soft); }

.gb-muted   { color: var(--gb-text-muted); }
.gb-dim     { color: var(--gb-text-dim); }

.gb-btn     { background: var(--gb-brand); color: var(--gb-text-on-brand);
              border: none; border-radius: var(--gb-radius-sm);
              font-weight: 700; cursor: pointer; }
.gb-btn:hover { background: var(--gb-brand-hover); }

.gb-btn-ghost { background: var(--gb-surface-2); color: var(--gb-text-muted);
                border: 1px solid var(--gb-border);
                border-radius: var(--gb-radius-sm);
                font-weight: 700; cursor: pointer; }
.gb-btn-ghost:hover { background: var(--gb-surface);
                      color: var(--gb-text); }

/* Semantic ghost button variants — same shape/weight as .gb-btn-ghost,
   tinted by MEANING so an action row reads as one intentional set rather
   than a rainbow of Tailwind pastels:
     neutral  → .gb-btn-ghost   (Close, Hand to admin)
     caution  → .gb-btn-warn    (Cancel — reversible)
     destroy  → .gb-btn-danger  (Delete — permanent)
     positive → .gb-btn-accent  (Contract — the productive next step)
     primary  → .gb-btn         (solid brand — Save)
   None set padding/size; add your own px/py utilities so each row stays
   uniform. Hover fills the tint solid for a clear pressed affordance. */
.gb-btn-danger { background: var(--gb-danger-bg); color: var(--gb-danger-text);
                 border: 1px solid var(--gb-danger-border);
                 border-radius: var(--gb-radius-sm);
                 font-weight: 700; cursor: pointer;
                 transition: background .12s, color .12s, border-color .12s; }
.gb-btn-danger:hover { background: var(--gb-danger); color: #fff;
                       border-color: var(--gb-danger); }

.gb-btn-warn { background: var(--gb-warn-bg); color: var(--gb-warn-text);
               border: 1px solid var(--gb-warn-border);
               border-radius: var(--gb-radius-sm);
               font-weight: 700; cursor: pointer;
               transition: background .12s, color .12s, border-color .12s; }
.gb-btn-warn:hover { background: var(--gb-warn); color: #1a1205;
                     border-color: var(--gb-warn); }

.gb-btn-accent { background: var(--gb-brand-soft); color: var(--gb-brand-text);
                 border: 1px solid var(--gb-brand-border);
                 border-radius: var(--gb-radius-sm);
                 font-weight: 700; cursor: pointer;
                 transition: background .12s, color .12s, border-color .12s; }
.gb-btn-accent:hover { background: var(--gb-brand); color: #fff;
                       border-color: var(--gb-brand); }

/* Give the base primary + neutral a matching transition too. */
.gb-btn, .gb-btn-ghost { transition: background .12s, color .12s, border-color .12s; }

.gb-overlay { background: var(--gb-overlay); }

/* ── Tailwind compatibility layer ──────────────────────────────
   713 Tailwind light-palette utilities are spread across the app
   (bg-white, text-gray-700, border-gray-200, ...). Rewriting them
   class-by-class would be an enormous, high-risk diff for zero
   behavioural gain. Instead, redefine what they MEAN inside a dark
   page. Scoped to html.gb-dark so untouched light pages are unaffected.

   Role-preserving, same as the JS pass: gray-700/800/900 were primary
   text on white and stay primary here; gray-400/300 were the dimmest
   and stay dimmest. Do NOT invert by lightness.

   !important is required to beat Tailwind's own utilities, which land
   in the CDN stylesheet after this file. It does NOT beat inline
   style="" — those still need the per-page hex pass. */
html.gb-dark {
  /* page + surfaces */
  --tw-shadow-color: rgba(0,0,0,.5);
}
html.gb-dark body                        { background: var(--gb-bg) !important; color: var(--gb-text); }

html.gb-dark .bg-white,
html.gb-dark .bg-slate-50                { background-color: var(--gb-surface) !important; }
html.gb-dark .bg-gray-50                 { background-color: var(--gb-bg) !important; }
html.gb-dark .bg-gray-100,
html.gb-dark .bg-gray-200,
html.gb-dark .bg-slate-100               { background-color: var(--gb-surface-2) !important; }

html.gb-dark .text-gray-900,
html.gb-dark .text-gray-800,
html.gb-dark .text-gray-700,
html.gb-dark .text-slate-900,
html.gb-dark .text-slate-800,
html.gb-dark .text-black                 { color: var(--gb-text) !important; }
html.gb-dark .text-gray-600,
html.gb-dark .text-gray-500,
html.gb-dark .text-slate-600,
html.gb-dark .text-slate-500             { color: var(--gb-text-muted) !important; }
html.gb-dark .text-gray-400,
html.gb-dark .text-gray-300,
html.gb-dark .text-slate-400,
html.gb-dark .text-slate-300             { color: var(--gb-text-dim) !important; }

html.gb-dark .border-gray-100,
html.gb-dark .border-gray-200,
html.gb-dark .border-gray-300,
html.gb-dark .border-slate-200,
html.gb-dark .border-slate-300           { border-color: var(--gb-border) !important; }

/* Form controls: Tailwind rarely styles these, the browser does. */
html.gb-dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.gb-dark select,
html.gb-dark textarea {
  background-color: var(--gb-surface-2);
  border-color: var(--gb-border);
  color: var(--gb-text);
}
html.gb-dark input::placeholder,
html.gb-dark textarea::placeholder       { color: var(--gb-text-dim); }
html.gb-dark option                      { background: var(--gb-surface-2); color: var(--gb-text); }

/* Gradient hero panels (.gb-hero) sit on a MID-TONE blue/purple, not on the
   dark page background. The muted/dim text tokens are tuned for #0f1117 and
   go muddy there, which is why the Set Lists and Band Members panels went
   unreadable. Inside a hero, everything is white-ish. Scott S29. */
html.gb-dark .gb-hero,
html.gb-dark .gb-hero .text-gray-900,
html.gb-dark .gb-hero .text-gray-800,
html.gb-dark .gb-hero .text-gray-700  { color: #fff !important; }
html.gb-dark .gb-hero .text-gray-600,
html.gb-dark .gb-hero .text-gray-500,
html.gb-dark .gb-hero .text-slate-600,
html.gb-dark .gb-hero .text-slate-500 { color: rgba(255,255,255,.88) !important; }
html.gb-dark .gb-hero .text-gray-400,
html.gb-dark .gb-hero .text-gray-300,
html.gb-dark .gb-hero .text-slate-400 { color: rgba(255,255,255,.72) !important; }
/* Panels nested in a hero are translucent white, not the dark surface. */
html.gb-dark .gb-hero .bg-white       { background-color: rgba(255,255,255,.14) !important; }
html.gb-dark .gb-hero .bg-gray-50,
html.gb-dark .gb-hero .bg-gray-100    { background-color: rgba(255,255,255,.10) !important; }
html.gb-dark .gb-hero .border-gray-100,
html.gb-dark .gb-hero .border-gray-200,
html.gb-dark .gb-hero .border-gray-300{ border-color: rgba(255,255,255,.22) !important; }

/* Hover states that assumed a white background. */
html.gb-dark .hover\:bg-gray-50:hover,
html.gb-dark .hover\:bg-gray-100:hover,
html.gb-dark .hover\:bg-slate-50:hover   { background-color: var(--gb-surface-2) !important; }

/* Divide/ring utilities used for table rows and focus rings. */
html.gb-dark .divide-gray-200 > * + *,
html.gb-dark .divide-gray-100 > * + *    { border-color: var(--gb-border) !important; }

/* ── Print ─────────────────────────────────────────────────────
   Set lists, contracts, stage plots, settlement sheets and flyers
   are printed on paper at gigs. Force them back to ink-on-white no
   matter what the screen theme is -- a dark print is unreadable and
   burns a cartridge. */
@media print {
  html.gb-dark { color-scheme: light; }
  html.gb-dark body,
  .gb-page, .gb-card, .gb-card-2, .gb-well, .gb-input,
  html.gb-dark .bg-white, html.gb-dark .bg-gray-50,
  html.gb-dark .bg-gray-100, html.gb-dark .bg-gray-200,
  html.gb-dark .bg-slate-50, html.gb-dark .bg-slate-100,
  html.gb-dark input, html.gb-dark select, html.gb-dark textarea {
    background: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
    box-shadow: none !important;
  }
  html.gb-dark .text-gray-900, html.gb-dark .text-gray-800,
  html.gb-dark .text-gray-700, html.gb-dark .text-slate-900,
  html.gb-dark .text-black                  { color: #000 !important; }
  html.gb-dark .text-gray-600, html.gb-dark .text-gray-500,
  html.gb-dark .text-gray-400, html.gb-dark .text-gray-300,
  html.gb-dark .text-slate-600, html.gb-dark .text-slate-400,
  .gb-muted, .gb-dim                        { color: #333 !important; }
  html.gb-dark .border-gray-100, html.gb-dark .border-gray-200,
  html.gb-dark .border-gray-300             { border-color: #999 !important; }
}