/* Gallery skin — match the hotel, orange as the contrast.
 *
 * The bundled SPA carries its own palette (GitHub-dark blue-grey with an amber
 * accent). It drives everything from custom properties, so the whole app can be
 * reskinned by redefining them — no bundle change, and nothing to redo when the
 * app is next rebuilt from source, as long as the variable names survive.
 *
 * Loaded as a file rather than injected: the app sends
 * Content-Security-Policy: default-src 'self', which blocks inline styles.
 * Must be linked AFTER the bundle's stylesheet to win the cascade.
 */
:root {
  /* Grounds and lines: the hotel's wet sand, so /gallery/ does not look like
     a different site from the page that links to it. */
  --bg:        #5c5241;
  --bg-alt:    #695c4a;
  --surface:   #695c4a;
  --border:    #8d7e68;
  --text:      #fffdfa;
  --text-dim:  #e7dccb;

  /* Orange as the only bright thing, matching the Phoenix portal's accent. */
  --accent:      #ffa088;
  --accent-soft: rgba(255, 160, 136, .16);

  /* The tbd-* set styles the folder shelf and tabs; same roles, same values. */
  --tbd-bg:   #5c5241;
  --tbd-card: #695c4a;
  --tbd-ink:  #fffdfa;
  --tbd-mut:  #e7dccb;
  --tbd-bord: #8d7e68;
  --tbd-navy: #695c4a;
}

/* Coral sits at mid luminance and so does mid tan, so coral TEXT only reaches
   3.3:1 on these cards. Anywhere the accent has to be read as words it either
   gets filled behind it, or uses --accent-text, the one shade light enough to
   work as type on this ground. */
:root { --accent-text: #ffc9bb; --on-accent: #2e2519; }

.tbd-tabbtn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary   { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-text); }
.auth-brand .accent { color: var(--accent-text); }