/* ==========================================================================
   CeramiTrack — Fiesta theme (authenticated app)
   Matches the mobile apps: cream base, terracotta primary, glaze accents.
   Applied via the .fiesta-page shell on signed-in pages; the public
   marketing pages keep their own neutral/dark styling.
   ========================================================================== */

:root {
  --fiesta-terracotta: #B0452B;
  --fiesta-terracotta-dark: #8F3620;
  --fiesta-cream: #FAF5EC;
  --fiesta-cream-dark: #F0E7D6;
  --fiesta-ink: #2E2620;
  --fiesta-ink-soft: #6B5D52;

  --glaze-red: #C43E34;
  --glaze-orange: #E48A3A;
  --glaze-yellow: #E8C658;
  --glaze-green: #5C8A5C;
  --glaze-teal: #3A8A8C;
  --glaze-blue: #3E64A8;
  --glaze-purple: #805A94;
  --glaze-brown: #764E30;
  --glaze-pink: #E4969E;
  --glaze-ivory: #EFE9D8;
  --glaze-grey: #8C8C84;
  --glaze-black: #3A3734;
}

/* Page shell ------------------------------------------------------------- */
.fiesta-page {
  min-height: 100vh;
  background:
    radial-gradient(1100px 260px at 50% -80px, rgba(176, 69, 43, 0.10), transparent 70%),
    var(--fiesta-cream);
  color: var(--fiesta-ink);
}

.fiesta-page h1 {
  color: var(--fiesta-ink);
}

.fiesta-page h2,
.fiesta-page h3 {
  color: var(--fiesta-ink);
}

/* Glaze accent band under the header ------------------------------------ */
.fiesta-band {
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--glaze-red),
    var(--glaze-orange),
    var(--glaze-yellow),
    var(--glaze-green),
    var(--glaze-teal),
    var(--glaze-blue),
    var(--glaze-purple),
    var(--glaze-pink)
  );
}

/* Glaze chips ------------------------------------------------------------- */
.glaze-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.65em;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--glaze, var(--glaze-brown));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.glaze-red { --glaze: var(--glaze-red); }
.glaze-orange { --glaze: var(--glaze-orange); }
.glaze-yellow { --glaze: var(--glaze-yellow); color: var(--fiesta-ink); text-shadow: none; }
.glaze-green { --glaze: var(--glaze-green); }
.glaze-teal { --glaze: var(--glaze-teal); }
.glaze-blue { --glaze: var(--glaze-blue); }
.glaze-purple { --glaze: var(--glaze-purple); }
.glaze-brown { --glaze: var(--glaze-brown); }
.glaze-pink { --glaze: var(--glaze-pink); }
.glaze-grey { --glaze: var(--glaze-grey); }
.glaze-black { --glaze: var(--glaze-black); }
.glaze-ivory { --glaze: var(--glaze-ivory); color: var(--fiesta-ink); text-shadow: none; border: 1px solid rgba(46, 38, 32, 0.15); }

/* Cards ------------------------------------------------------------------- */
.fiesta-card {
  background: #fff;
  border: 1px solid rgba(46, 38, 32, 0.08);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(46, 38, 32, 0.05),
    0 10px 28px -14px rgba(176, 69, 43, 0.22);
}

.fiesta-card--lift {
  transition: transform 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}

.fiesta-card--lift:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(46, 38, 32, 0.06),
    0 16px 34px -14px rgba(176, 69, 43, 0.30);
}

.fiesta-card--selected {
  outline: 2px solid var(--fiesta-terracotta);
  outline-offset: 1px;
}

/* Glaze band on the top of a collection card ------------------------------ */
.glaze-band {
  height: 6px;
  border-radius: 16px 16px 0 0;
  background: var(--glaze, var(--glaze-brown));
}

/* Buttons ------------------------------------------------------------------ */
.fiesta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: none;
  border-radius: 999px;
  padding: 0.7em 1.4em;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--fiesta-terracotta), var(--fiesta-terracotta-dark));
  box-shadow: 0 6px 16px -8px rgba(176, 69, 43, 0.6);
  transition: transform 100ms ease, box-shadow 100ms ease, opacity 100ms ease;
}

.fiesta-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(176, 69, 43, 0.65);
}

.fiesta-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fiesta-btn--ghost {
  background: transparent;
  color: var(--fiesta-ink);
  border: 1px solid rgba(46, 38, 32, 0.25);
  box-shadow: none;
}

.fiesta-btn--ghost:hover:not(:disabled) {
  background: rgba(46, 38, 32, 0.06);
  box-shadow: none;
}

.fiesta-btn--danger {
  background: linear-gradient(135deg, var(--glaze-red), #9E2F27);
  box-shadow: 0 6px 16px -8px rgba(196, 62, 52, 0.5);
}

/* IdP buttons ---------------------------------------------------------------- */
.idp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  border-radius: 12px;
  padding: 0.85em 1.2em;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  background: #fff;
  color: var(--fiesta-ink);
  border: 1px solid rgba(46, 38, 32, 0.15);
  box-shadow: 0 1px 2px rgba(46, 38, 32, 0.06);
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.idp-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(46, 38, 32, 0.35);
}

.idp-button svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

/* Inputs --------------------------------------------------------------------- */
.fiesta-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(46, 38, 32, 0.18);
  background: #fff;
  padding: 0.8em 1em;
  font-size: 0.95rem;
  color: var(--fiesta-ink);
}

.fiesta-input:focus {
  outline: 2px solid rgba(176, 69, 43, 0.5);
  outline-offset: 1px;
}

/* Misc ------------------------------------------------------------------------ */
.fiesta-note {
  color: var(--fiesta-ink-soft);
  font-size: 0.88rem;
}

.fiesta-kbd-hint {
  font-size: 0.8rem;
  color: var(--fiesta-ink-soft);
}

.fiesta-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.85rem;
  color: var(--fiesta-ink-soft);
}

.fiesta-empty {
  border: 2px dashed rgba(46, 38, 32, 0.15);
  border-radius: 16px;
  padding: 2.2rem 1.5rem;
  text-align: center;
  color: var(--fiesta-ink-soft);
  background: rgba(255, 255, 255, 0.55);
}