/* ============================================================
   GoToFarm — components.css
   Composants réutilisables conformes à DESIGN.md
   (Organic Editorialism)

   ⚠️  Charger APRÈS tokens.css et base.css.
   ============================================================ */


/* =============================================================================
   1. BUTTONS — DESIGN.md §5 "Tactile Connection"
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: var(--touch-target-min);
  padding: var(--spacing-3) var(--spacing-6);
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  border-radius: var(--radius-pebble);                       /* "pebble-like" */
  cursor: pointer;
  text-decoration: none;
  transition:
    transform   var(--duration-fast)   var(--easing-spring),
    box-shadow  var(--duration-normal) var(--easing-out),
    background  var(--duration-fast)   var(--easing-out),
    opacity     var(--duration-fast)   var(--easing-out);
  white-space: nowrap;
  user-select: none;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); transform: none; }

/* — Primary : gradient vert forêt (CTA principal) — */
.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-ambient-sm);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-ambient-md);
}

/* — Secondary : ghost border, texte primary (DESIGN.md §5) — */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--border-ghost);
}
.btn-secondary:hover {
  background: var(--color-surface-container-low);
  box-shadow: inset 0 0 0 1.5px var(--border-ghost-hover);
}

/* — Tertiary : surface_container_high, pas de bordure — */
.btn-tertiary {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}
.btn-tertiary:hover {
  background: var(--color-surface-container-highest);
  transform: translateY(-1px);
}

/* — Cashback : accent doré (réservé aux actions cashback) — */
.btn-cashback {
  background: var(--color-accent-cashback);
  color: var(--color-on-accent-cashback);
  box-shadow: var(--shadow-ambient-sm);
}
.btn-cashback:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-ambient-md);
}

/* — Tailles — */
.btn-sm { min-height: 36px; padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-label-md); }
.btn-lg { min-height: 56px; padding: var(--spacing-4) var(--spacing-8); font-size: var(--text-title-md); }

/* — Block (pleine largeur sur mobile) — */
.btn-block { width: 100%; }


/* =============================================================================
   2. CARDS — Tonal Layering (DESIGN.md §4)
   "Soft Lift" : surface_container_lowest sur surface_container_high
   ========================================================================== */

.card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-card);
  padding: var(--spacing-6);
  transition:
    transform  var(--duration-normal) var(--easing-out),
    box-shadow var(--duration-normal) var(--easing-out);
}

.card-elevated {
  box-shadow: var(--shadow-ambient-sm);
}
.card-elevated:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-ambient-md);
}

.card-tinted {                                                 /* card sur teinte de surface */
  background: var(--color-surface-container-low);
}

/* — Card "How it Works" (DESIGN.md §5 — pas de divider, gap large) — */
.card-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  background: var(--color-surface-container-low);
  border-radius: var(--radius-card);
}

.card-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  border-radius: var(--radius-pebble);
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: var(--weight-bold);
}


/* =============================================================================
   3. SELECTION CHIPS (DESIGN.md §5 — catégories produits)
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  border: none;                                               /* pas de bordure 1px ! */
  border-radius: var(--radius-pebble);
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-out),
              color      var(--duration-fast) var(--easing-out);
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover {
  background: var(--color-surface-container-high);
}

.chip.active,
.chip[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.chip-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}


/* =============================================================================
   4. INPUT FIELDS & SEARCH (DESIGN.md §5)
   ========================================================================== */

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-ghost);            /* ghost border @ 15% */
  font-family: var(--font-body);
  font-size: max(1rem, 16px);                                 /* anti-zoom iOS */
  line-height: var(--leading-body);
  transition: background var(--duration-fast) var(--easing-out),
              box-shadow var(--duration-fast) var(--easing-out);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.6;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  background: var(--color-surface-bright);
  box-shadow: inset 0 0 0 2px var(--border-ghost-focus);     /* @ 40% sur focus */
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

/* — Search bar : pleine largeur, full radius — */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-5);
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-pebble);
  box-shadow: inset 0 0 0 1px var(--border-ghost);
  transition: box-shadow var(--duration-fast) var(--easing-out);
}

.search-bar:focus-within {
  background: var(--color-surface-bright);
  box-shadow: inset 0 0 0 2px var(--border-ghost-focus);
}

.search-bar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: max(1rem, 16px);
  color: var(--color-on-surface);
}


/* =============================================================================
   5. NAV — Glassmorphism (DESIGN.md §2 "Signature Textures")
   ========================================================================== */

.nav-glass {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
  min-height: 64px;
  padding: var(--spacing-3) var(--section-padding-x);
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  /* PAS de bordure 1px (DESIGN.md "No-Line Rule") — la séparation se fait
     par contraste de surface avec la section suivante. */
}


/* =============================================================================
   6. BADGE / PILL
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  border-radius: var(--radius-pebble);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge-cashback {
  background: var(--color-accent-cashback);
  color: var(--color-on-accent-cashback);
}

.badge-success { background: var(--color-success); color: var(--color-on-success); }
.badge-warning { background: var(--color-warning); color: var(--color-on-warning); }
.badge-error   { background: var(--color-error);   color: var(--color-on-error);   }


/* =============================================================================
   7. ÉTAT — empty / loading / error
   ========================================================================== */

.state-empty,
.state-loading,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-12) var(--spacing-6);
  text-align: center;
  color: var(--color-on-surface-variant);
}


/* =============================================================================
   8. UTILITAIRES TYPOGRAPHIQUES
   ========================================================================== */

.text-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-weight: var(--weight-extrabold); }
.text-display-md { font-family: var(--font-display); font-size: var(--text-display-md); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-weight: var(--weight-bold); }
.text-display-sm { font-family: var(--font-display); font-size: var(--text-display-sm); letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-weight: var(--weight-bold); }
.text-headline-lg { font-family: var(--font-display); font-size: var(--text-headline-lg); letter-spacing: var(--tracking-headline); }
.text-headline-md { font-family: var(--font-display); font-size: var(--text-headline-md); letter-spacing: var(--tracking-headline); }
.text-body-lg     { font-size: var(--text-body-lg); }
.text-body-md     { font-size: var(--text-body-md); }
.text-eyebrow {                                                /* DESIGN.md — pré-titre uppercase */
  font-size: var(--text-label-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-container);
}

.text-muted   { color: var(--color-on-surface-variant); }
.text-primary { color: var(--color-primary); }


/* =============================================================================
   9. UTILITAIRES LAYOUT
   ========================================================================== */

.stack       { display: flex; flex-direction: column; gap: var(--spacing-4); }
.stack-sm    { display: flex; flex-direction: column; gap: var(--spacing-2); }
.stack-lg    { display: flex; flex-direction: column; gap: var(--spacing-8); }
.row         { display: flex; align-items: center; gap: var(--spacing-4); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-6);
}