@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,400..800&family=Geist:wght@300..600&display=swap');

/* ==========================================================================
   MotionHub Share — brand skin for FileBrowser
   Palette and type mirror motionhub.studio (theme.css).

   Light only, on purpose: the MotionHub brand is light-first, and the
   wordmark's "Motion" is dark navy, which needs a paper background to read.
   The light values are therefore applied to BOTH :root and :root.dark, so the
   portal looks identical whether or not the visitor's OS is in dark mode.

   Implemented by overriding FileBrowser's own CSS variables wherever possible,
   so future FileBrowser updates keep working.
   ========================================================================== */

:root,
:root.dark {
  /* MotionHub tokens */
  --mh-paper:        #f3efe7;
  --mh-paper-2:      #ebe6db;
  --mh-card:         #fbf8f1;
  --mh-ink:          #13110e;
  --mh-muted:        #6b665c;
  --mh-accent:       #c44d2c;
  --mh-accent-dark:  #a33d22;
  --mh-hairline:     rgba(19, 17, 14, 0.10);
  --mh-r:            14px;
  --mh-r-lg:         22px;
  --mh-display:      "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mh-body:         "Geist", ui-sans-serif, system-ui, sans-serif;

  /* --- map onto FileBrowser's variables --- */
  --background:       var(--mh-paper);
  --surfacePrimary:   var(--mh-card);
  --surfaceSecondary: var(--mh-paper-2);
  --textPrimary:      var(--mh-muted);
  --textSecondary:    var(--mh-ink);
  --action:           var(--mh-muted);
  --divider:          rgba(19, 17, 14, 0.07);
  --borderPrimary:    var(--mh-hairline);
  --borderSecondary:  rgba(19, 17, 14, 0.18);
  --hover:            rgba(19, 17, 14, 0.06);
  --item-selected:    var(--mh-paper-2);
  --moon-grey:        var(--mh-paper-2);

  /* primary action colour drives buttons, links and active icons */
  --blue:             var(--mh-accent);
  --dark-blue:        var(--mh-accent-dark);
  --icon-blue:        var(--mh-accent);
  --iconPrimary:      var(--mh-accent);
  --iconSecondary:    #fff;
  --iconTertiary:     #c9c3b7;

  --dividerPrimary:   rgba(19, 17, 14, 0.06);
  --dividerSecondary: rgba(19, 17, 14, 0.12);
}

/* --- typography ---------------------------------------------------------- */

body,
input,
button,
select,
textarea {
  font-family: var(--mh-body);
}

h1, h2, h3,
.card > h3,
#listing h2 {
  font-family: var(--mh-display);
  letter-spacing: -0.01em;
}

/* --- login --------------------------------------------------------------- */

#login,
:root.dark #login {
  background: var(--mh-paper);
  /* soft warm wash so the card lifts off the page */
  background-image:
    radial-gradient(58rem 34rem at 50% -14%, rgba(196, 77, 44, 0.10), transparent 62%),
    radial-gradient(44rem 30rem at 50% 118%, rgba(45, 132, 130, 0.10), transparent 60%);
}

#login form,
:root.dark #login form {
  /* default card is 16em — too narrow for a wordmark */
  width: min(370px, 90vw);
  max-width: none;
  background: var(--mh-card);
  border: 1px solid var(--mh-hairline);
  border-radius: var(--mh-r-lg);
  box-shadow:
    0 24px 48px -12px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  padding: 2.6rem 2.2rem 2.2rem;
}

/* the wordmark carries the brand — give it room */
#login img {
  width: 100%;
  max-width: 286px;
  height: auto;
  margin: 0 auto 0.5rem;
  display: block;
}

#login h1 {
  font-family: var(--mh-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--mh-muted);
  letter-spacing: 0.01em;
  margin-bottom: 1.6rem;
}

#login .input,
:root.dark #login .input {
  background: #fff;
  color: var(--mh-ink);
  border: 1.5px solid var(--mh-hairline);
  border-radius: 10px;
  padding: 0.72rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#login .input:focus-within,
#login .input:focus {
  border-color: var(--mh-accent);
  box-shadow: 0 0 0 3px rgba(196, 77, 44, 0.14);
  outline: none;
}

#login .button,
:root.dark #login .button {
  background: var(--mh-accent);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.78rem 1rem;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.08s ease;
}

#login .button:hover { background: var(--mh-accent-dark); }
#login .button:active { transform: translateY(1px); }

#login .wrong {
  background: var(--mh-accent-dark);
  border-radius: 10px;
}

/* --- chrome -------------------------------------------------------------- */

.card,
#listing .item,
.context-menu {
  border-radius: var(--mh-r);
}

.card {
  box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.20), 0 0 0 1px var(--mh-hairline);
}

.button--flat:hover { background: rgba(196, 77, 44, 0.10); }

/* selected rows read as brand, not default blue */
#listing .item[aria-selected="true"] {
  background: rgba(196, 77, 44, 0.10) !important;
  border-color: rgba(196, 77, 44, 0.30);
}

/* progress + loading accents */
#loading .spinner > div { background: var(--mh-accent); }
.progress div { background-color: var(--mh-accent) !important; }

/* the sidebar footer prints "File Browser <version>" — don't advertise the
   stack or its version to an external collaborator */
.credits { display: none !important; }