/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-canvas:       #FAF8F4;
  --color-surface:      #FFFFFF;
  --color-surface-warm: #FFFEF9;
  --color-border:       #E8DFD0;
  --color-border-soft:  #F0E9DC;

  --color-ink:          #2C2218;
  --color-ink-muted:    #7A6A57;
  --color-ink-faint:    #B0A090;

  /* Primary — terracotta / burnt sienna */
  --color-primary:      #C0541A;
  --color-primary-dark: #9E4214;
  --color-primary-light:#F5E8DF;
  --color-primary-faint:#FBF3ED;

  /* Sage — take/accept actions */
  --color-sage:         #4D7C68;
  --color-sage-dark:    #3A6152;
  --color-sage-light:   #DFF0E9;
  --color-sage-faint:   #EEF7F3;

  /* Plum — taken/claimed state */
  --color-plum:         #6B4F8E;
  --color-plum-dark:    #573F73;
  --color-plum-light:   #EDE4F7;
  --color-plum-faint:   #F5F0FB;

  /* Utility */
  --color-success:      #2A7A5A;
  --color-success-bg:   #E8F5EE;
  --color-danger:       #B83232;
  --color-danger-bg:    #FDEAEA;
  --color-warning:      #9A6700;
  --color-warning-bg:   #FEF6E0;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Shadows */
  --shadow-card:  2px 4px 20px rgba(80, 50, 20, 0.07);
  --shadow-hover: 2px 6px 28px rgba(80, 50, 20, 0.12);
  --shadow-sm:    0 1px 4px rgba(80, 50, 20, 0.06);

  /* Radii */
  --radius-card: 10px;
  --radius-btn:  7px;
  --radius-pill: 9999px;
}

/* ─── Base ───────────────────────────────────────────────────────────────────── */
html {
  background-color: var(--color-canvas);
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Typography helpers ─────────────────────────────────────────────────────── */
.font-display {
  font-family: var(--font-display);
}

.text-display-xl {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.text-display-lg {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.text-display-md {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.text-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ─── Card ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card-warm {
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-btn);
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 2px 8px rgba(192, 84, 26, 0.3);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-canvas);
  border-color: #CEC0AF;
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-primary-faint);
  color: var(--color-ink);
}

.btn-sage {
  background: var(--color-sage);
  color: #fff;
  border-color: var(--color-sage);
}
.btn-sage:hover {
  background: var(--color-sage-dark);
  border-color: var(--color-sage-dark);
  box-shadow: 0 2px 8px rgba(77, 124, 104, 0.3);
}

.btn-sage-soft {
  background: var(--color-sage-faint);
  color: var(--color-sage);
  border-color: var(--color-sage-light);
}
.btn-sage-soft:hover {
  background: var(--color-sage-light);
}

.btn-plum {
  background: var(--color-plum);
  color: #fff;
  border-color: var(--color-plum);
}
.btn-plum:hover {
  background: var(--color-plum-dark);
}

.btn-plum-soft {
  background: var(--color-plum-faint);
  color: var(--color-plum);
  border-color: var(--color-plum-light);
}
.btn-plum-soft:hover {
  background: var(--color-plum-light);
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: #F5C5C5;
}
.btn-danger:hover {
  background: #FBDDDD;
}

.btn-danger-solid {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}
.btn-danger-solid:hover {
  background: #9E2828;
}

.btn-sm {
  font-size: 0.8125rem;
  padding: 0.35rem 0.7rem;
  gap: 0.3rem;
}

.btn-xs {
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  gap: 0.25rem;
  font-weight: 500;
}

.btn-icon {
  padding: 0.4rem;
  border-radius: 6px;
}

/* ─── Form elements ───────────────────────────────────────────────────────────── */
.form-input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 7px;
  padding: 0.6rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.form-input::placeholder { color: var(--color-ink-faint); }
.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(192, 84, 26, 0.12);
}
.form-input.error {
  border-color: var(--color-danger);
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

/* ─── Badges / Pills ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
}

.badge-sage {
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.badge-plum {
  background: var(--color-plum-light);
  color: var(--color-plum-dark);
}

.badge-warm {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.badge-neutral {
  background: #EDE8E0;
  color: var(--color-ink-muted);
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* ─── Alert / Flash ──────────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.alert-success {
  background: var(--color-success-bg);
  border-color: #B7E2CD;
  color: var(--color-success);
}

.alert-error {
  background: var(--color-danger-bg);
  border-color: #F5C5C5;
  color: var(--color-danger);
}

.alert-info {
  background: var(--color-primary-faint);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: #F5D98C;
  color: var(--color-warning);
}

/* ─── Avatar ─────────────────────────────────────────────────────────────────── */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, #9E4214 100%);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.avatar-plum {
  background: linear-gradient(135deg, var(--color-plum) 0%, #4E3869 100%);
}

.avatar-sage {
  background: linear-gradient(135deg, var(--color-sage) 0%, #2E5C4A 100%);
}

/* ─── Divider ────────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
}

/* ─── Page‑load animations ───────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-up {
  animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease both;
}

/* Staggered list card entry */
.stagger-1 { animation-delay: 0.04s; }
.stagger-2 { animation-delay: 0.09s; }
.stagger-3 { animation-delay: 0.14s; }
.stagger-4 { animation-delay: 0.19s; }
.stagger-5 { animation-delay: 0.24s; }
.stagger-6 { animation-delay: 0.29s; }

/* ─── Item appear (Stimulus hook stays, override colors) ─────────────────────── */
[data-controller~="item"] {
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Texture overlay for cards (subtle noise) ────────────────────────────────── */
.texture::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--color-canvas); }
::-webkit-scrollbar-thumb {
  background: #D4C9B8;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: #BFB2A0; }