/* Files (files.product-sid.us) — full UI redesign per DESIGN-replicate.md */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700&family=Geist:wght@400;500;600&display=swap');

:root, :root.dark {
  --blue: #ea2804;                        /* primary accent -> Replicate orange */
  --dark-blue: #c01f00;                   /* pressed state */
  --surfacePrimary: #ffffff;              /* cards, mosaic tiles, inputs -> white */
  --surfaceSecondary: #f3f0e8;            /* surface-bone, mobile nav drawer */
  --textPrimary: #202020;                 /* ink */
  --textSecondary: #3a3a3a;               /* body */
  --borderPrimary: rgba(32,32,32,.12);    /* hairline */
  --borderSecondary: #202020;             /* hairline-strong */
  --divider: rgba(32,32,32,.12);
  --background: #f9f7f3;                  /* canvas */
  --hover: rgba(32,32,32,.04);
}

html, body, #app {
  background: #f9f7f3;
  font-family: 'Geist', Arial, Helvetica, sans-serif;
  color: #202020;
}

/* Chrome sits on the cream canvas, not white */
header, nav {
  background: #f9f7f3 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(32,32,32,.12);
}

/* Buttons: fully rounded, incl. icon-only toolbar buttons */
.button {
  border-radius: 9999px !important;
  font-family: 'Geist', Arial, Helvetica, sans-serif;
  font-weight: 600;
  box-shadow: none;
}

/* Inputs & search: pill-shaped */
.input {
  border-radius: 9999px !important;
  font-family: 'Geist', Arial, Helvetica, sans-serif;
}
.input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.5);
}

/* Dialog/settings cards: mid-radius, never pill */
.card {
  border-radius: 16px !important;
  box-shadow: none !important;
  border: 1px solid rgba(32,32,32,.12);
}

/* Mosaic file/folder tiles: mid-radius, soft hover lift */
.item {
  border-radius: 10px !important;
  box-shadow: none !important;
  border: 1px solid rgba(32,32,32,.12) !important;
  transition: box-shadow .15s, transform .15s;
}
.item:hover {
  box-shadow: 0 8px 24px rgba(32,32,32,.08) !important;
}

h1, h2, h3, .card-title, .item .name {
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Login screen */
#login {
  background: #f9f7f3 !important;
}

#login img {
  width: 4.5em;
  height: 4.5em;
}

#login h1 {
  color: #202020;
  font-family: 'Bricolage Grotesque', Georgia, serif;
  font-weight: 700;
  font-size: 2em;
  letter-spacing: -1px;
}

#login form {
  background: #ffffff;
  border: 1px solid rgba(32,32,32,.12);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(32,32,32,.08);
  padding: 2.5em 2em 2em;
}

#login .input {
  height: 44px;
  padding: 0 1.25em;
  border: 1px solid rgba(32,32,32,.12);
  font-size: .95em;
}

#login .button {
  background: #ea2804;
  color: #ffffff;
  height: 44px;
}

#login .button:hover,
#login .button:active {
  background: #c01f00;
}

#login .wrong {
  border-radius: 9999px;
}

#login .logout-message {
  border-radius: 9999px;
}

#login p {
  color: #ea2804;
  font-family: 'Geist', Arial, Helvetica, sans-serif;
}