/* ============================================================================
   BIG TINGS — Components
   Reusable component classes built on colors_and_type.css tokens.
   Buttons · inputs · cards · badges · chips
   ============================================================================ */

/* ---- Buttons ---------------------------------------------------------------
   Pill shaped, warm, tactile. Press = subtle shrink. Hover = darken.        */
.btn{
  font-family:var(--font-ui);font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius-pill);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn{box-shadow:0 1px 2px rgba(74,56,36,0.10);}
.btn:active{transform:translateY(1px) scale(0.985);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--sand-100),0 0 0 5px var(--focus-ring);}

/* Primary = the signature DARK GREEN, cream text — bold & alive */
.btn--primary{background:var(--flora-500);color:var(--sand-100);}
.btn--primary:hover{background:var(--flora-600);box-shadow:0 6px 16px rgba(40,86,52,0.30);}

.btn--teal{background:var(--flora-500);color:var(--sand-100);}
.btn--teal:hover{background:var(--flora-600);box-shadow:0 6px 16px rgba(40,86,52,0.30);}

/* Gold paired with dark-green text (gold + green vibe, never gold + brown) */
.btn--gold{background:var(--sun-500);color:var(--flora-600);}
.btn--gold:hover{background:var(--sun-400);box-shadow:0 6px 16px rgba(216,146,58,0.32);}

/* Ink = solid warm brown, cream text */
.btn--ink{background:var(--ink-800);color:var(--sand-100);}
.btn--ink:hover{background:var(--ink-900);box-shadow:0 6px 16px rgba(66,42,18,0.30);}

/* Sea = baby blue, ink text */
.btn--sea{background:var(--tide-300);color:var(--ink-900);}
.btn--sea:hover{background:var(--tide-400);box-shadow:0 6px 16px rgba(88,163,191,0.32);}

.btn--outline{background:transparent;color:var(--ink-800);border-color:var(--ink-700);}
.btn--outline:hover{background:var(--ink-800);color:var(--sand-100);border-color:var(--ink-800);}

.btn--ghost{background:transparent;color:var(--ink-800);}
.btn--ghost:hover{background:var(--sand-200);}

/* White outline pill for use over full-bleed photography (site hero style) */
.btn--onphoto{background:rgba(255,255,255,0.06);color:#fff;border-color:rgba(255,255,255,0.85);backdrop-filter:blur(2px);}
.btn--onphoto:hover{background:#fff;color:var(--ink-900);border-color:#fff;}

.btn--sm{padding:8px 16px;font-size:13.5px;}
.btn--lg{padding:15px 32px;font-size:16px;}

/* ---- Form fields ----------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--fg-muted);letter-spacing:0.02em;}
.input{
  font-family:var(--font-body);font-size:16px;color:var(--ink-800);
  background:var(--white);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md);padding:12px 16px;width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder{color:var(--fg-subtle);}
.input:focus{outline:none;border-color:var(--sun-500);box-shadow:0 0 0 3px rgba(226,163,46,0.18);}

/* ---- Cards ----------------------------------------------------------------- */
.card{
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:var(--space-6);
}
.card--flat{box-shadow:none;}

/* ---- Badges / chips / tags ------------------------------------------------- */
.badge{
  font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:0.04em;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill);
}
/* Vibrant SOLID fills — confident, not washed out */
.badge--sun{background:var(--sun-500);color:var(--flora-600);}
.badge--gold{background:var(--sun-500);color:var(--flora-600);}
.badge--clay{background:var(--clay-300);color:var(--sand-100);}
.badge--peach{background:var(--clay-200);color:var(--clay-600);}
.badge--moss{background:var(--moss-400);color:var(--sand-100);}
.badge--ocean{background:var(--tide-300);color:var(--ink-900);}
.badge--baby{background:var(--tide-200);color:var(--tide-600);}
.badge--flora{background:var(--flora-500);color:var(--sand-100);}
.badge--moana{background:var(--flora-500);color:var(--sand-100);}

.chip{
  font-family:var(--font-ui);font-weight:500;font-size:13.5px;color:var(--ink-800);
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--white);border:1.5px solid var(--border-strong);cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
}
.chip:hover{border-color:var(--flora-400);color:var(--flora-600);}
.chip--active{background:var(--flora-500);color:var(--sand-100);border-color:var(--flora-500);}

/* ---- Eyebrow + section header pattern -------------------------------------- */
.eyebrow{
  font-family:var(--font-ui);font-weight:600;font-size:13px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--clay-500);
}