/* ==========================================================================
   Appreciation Wall — "Sunlit Paper"
   Shared tokens for the guest and admin surfaces.

   Direction: warm, light, celebratory. The ground is cream rather than white
   (#FFF9F0) because pure white on a projector glares and reads clinical; a warm
   ground makes the notes feel like paper on a table in the afternoon.

   One ink colour (#3A3226 — near-black with a brown cast) sits on every note
   colour. That is deliberate: it clears WCAG AA on all six pastels at large
   sizes, so the palette can be re-themed without anyone re-checking contrast.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* -- ground ----------------------------------------------------------- */
  --canvas:        #FFF9F0;
  --canvas-tint:   #FFE9D6;
  --surface:       #FFFFFF;
  --surface-sunk:  #FFF4E6;

  /* -- ink -------------------------------------------------------------- */
  --ink:           #3A3226;
  --ink-soft:      #7A6A55;
  --ink-faint:     #B9A990;

  /* -- accent ----------------------------------------------------------- */
  --accent:        #FF7A59;   /* coral  — primary action */
  --accent-deep:   #E85A38;
  --accent-warm:   #FFC857;   /* marigold — secondary */
  --joy:           #6BCB9B;   /* mint   — success */
  --alert:         #E5484D;

  /* -- note palette (kept in sync with Events::DEFAULT_THEME) ------------ */
  --note-0: #FFF1A8;  /* butter   */
  --note-1: #FFD3D8;  /* blush    */
  --note-2: #C7F0D8;  /* mint     */
  --note-3: #C9E4FF;  /* sky      */
  --note-4: #E2D5FF;  /* lavender */
  --note-5: #FFDDC2;  /* peach    */

  /* -- type ------------------------------------------------------------- */
  --font-ui:   'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  /* -- depth: warm-tinted shadows, never grey ---------------------------- */
  --lift-1: 0 1px 2px rgba(90, 62, 30, .06), 0 2px 6px rgba(90, 62, 30, .06);
  --lift-2: 0 2px 6px rgba(90, 62, 30, .08), 0 8px 24px rgba(90, 62, 30, .10);
  --lift-3: 0 12px 40px rgba(90, 62, 30, .16);

  --radius:    18px;
  --radius-sm: 12px;

  /* One easing everywhere. Motion reads as choreographed only if the whole
     product agrees on how things move. */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--canvas);
  /* Two soft warm pools, top-left and bottom-right — gives the flat cream
     some depth without a texture image to download. */
  background-image:
    radial-gradient(1200px 800px at 12% -10%, var(--canvas-tint) 0%, transparent 60%),
    radial-gradient(1000px 700px at 108% 110%, #FFEFD9 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* -- primitives ---------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2rem, 34rem); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  padding: 1.5rem;
}

.btn {
  font: inherit;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  cursor: pointer;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(255, 122, 89, .35);
  transition: transform .18s var(--ease-back), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 122, 89, .45);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
  border: 2px solid #F0E2CE;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--surface-sunk);
  box-shadow: none;
  color: var(--ink);
}

.btn--joy   { background: var(--joy);   box-shadow: 0 4px 14px rgba(107, 203, 155, .35); }
.btn--alert { background: var(--alert); box-shadow: 0 4px 14px rgba(229, 72, 77, .3); }
.btn--sm    { padding: .5rem 1rem; font-size: .85rem; }

/* Visible focus everywhere. Never remove it. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .4rem;
  color: var(--ink-soft);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  width: 100%;
  padding: .8rem 1rem;
  border: 2px solid #F0E2CE;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--ink);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }

.muted { color: var(--ink-soft); }
.tiny  { font-size: .82rem; }

.pill {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pill--live   { background: #DEF7EA; color: #1B7A4B; }
.pill--draft  { background: #F1E7D6; color: #8A6D42; }
.pill--paused { background: #FFE9C7; color: #97650F; }

/* Toast — one shared banner for errors and confirmations. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 150%);
  background: var(--ink);
  color: #FFF6E8;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: var(--lift-3);
  z-index: 999;
  transition: transform .4s var(--ease-back);
  max-width: calc(100vw - 2rem);
}
.toast.is-open { transform: translate(-50%, 0); }
.toast--alert { background: var(--alert); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}