/* ========================================
   CARDS — Design System Premium (Steve Jobs Neat)
   ========================================

   Trois variantes cardinales :
     .card            — default, flat, subtle border hover
     .card-premium    — elevation-2 → elevation-3 au hover, pour contenus mis en avant
     .card-flat       — elevation-0, border light, utilitaire (zones calmes)
     .card-interactive — cliquable, hover premium avec lift + accent tint
     .card-stat       — KPI cards avec subtle accent hover

   Règle : toujours passer par --elevation-* et --ease-out-premium, jamais de
   shadow hardcoded. Cf. plan Sprint 1.4 (2026-04-24).
   ======================================== */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--elevation-1);
  border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent 40%);
  transition: box-shadow 180ms var(--ease-out-premium),
              border-color 180ms var(--ease-out-premium);
}

.card:hover {
  box-shadow: var(--elevation-2);
  border-color: var(--border-default);
}

/* ── Premium card — elevation notable, pour contenus mis en avant (hero cards,
   offers, featured content). Elevation-2 base, elevation-3 au hover. ── */
.card-premium {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--elevation-2);
  border: 1px solid color-mix(in srgb, var(--border-default) 40%, transparent 60%);
  transition: box-shadow 220ms var(--ease-out-premium),
              transform 220ms var(--ease-out-premium);
}

.card-premium:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-1px);
}

/* ── Flat card — aucune elevation, juste une border hairline. Pour zones
   calmes, listings denses, sections informatives sans emphase. ── */
.card-flat {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--elevation-0);
  border: 1px solid var(--border-light);
  transition: background 180ms var(--ease-out-premium),
              border-color 180ms var(--ease-out-premium);
}

.card-flat:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-default);
}

/* ============================================================
   Card border modifiers — left accent bar (semantic state)
   Usage : <div class="card card-border-accent">...</div>
   ============================================================ */
.card-border-accent {
  border-left: 3px solid var(--accent);
}
.card-border-green {
  border-left: 3px solid var(--color-green);
}
.card-border-red {
  border-left: 3px solid var(--color-red);
}
.card-border-orange {
  border-left: 3px solid var(--color-orange);
}

/* ============================================================
   Tinted background utilities — semantic colors at 10% alpha
   Equivalent à bg-{color}/10 Tailwind mais via tokens qui
   s'adaptent light/dark via design_tokens.css.
   ============================================================ */
.bg-green-tint  { background: var(--color-green-bg); }
.bg-red-tint    { background: var(--color-red-bg); }
.bg-blue-tint   { background: var(--color-blue-bg); }
.bg-orange-tint { background: var(--color-orange-bg); }
.bg-amber-tint  { background: var(--color-amber-bg); }

/* ============================================================
   Callouts — Notion-style colored info boxes (Sprint post-S8)
   Usage : <div class="callout-warning">⚠ Important: ...</div>
   ============================================================ */
.callout-warning {
  background: var(--color-amber-bg);
  border: 1px solid var(--color-amber);
  color: var(--color-amber-text);
}
.callout-info {
  background: var(--color-blue-bg);
  border: 1px solid var(--color-blue);
  color: var(--color-blue-text);
}
.callout-success {
  background: var(--color-green-bg);
  border: 1px solid var(--color-green);
  color: var(--color-green-text);
}
.callout-error {
  background: var(--color-red-bg);
  border: 1px solid var(--color-red);
  color: var(--color-red-text);
}

.hover-lift {
  transition: box-shadow 0.2s ease;
}

.hover-lift:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Interactive card — premium hover for clickable content cards ── */
.card-interactive {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.card-interactive:hover {
  border-color: color-mix(in srgb, var(--border-default) 60%, var(--accent) 40%);
  background: color-mix(in srgb, var(--bg-surface) 98%, var(--accent) 2%);
}

/* Thumbnail zone inside interactive cards */
.card-interactive .card-thumb {
  transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-interactive:hover .card-thumb {
  filter: brightness(1.05);
}

/* Title inside interactive cards → accent on hover */
.card-interactive .card-title {
  transition: color 0.3s ease;
}
.card-interactive:hover .card-title {
  color: var(--accent) !important;
}

/* Icon container inside interactive cards → warm glow */
.card-interactive .card-icon {
  transition: background-color 0.3s ease;
}

/* Quick action footer → fade in on hover */
.card-interactive .card-actions {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.card-interactive:hover .card-actions {
  opacity: 1;
}

/* ── Stat card — subtle hover for stats/KPI cards ── */
.card-stat {
  transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-stat:hover {
  border-color: color-mix(in srgb, var(--border-default) 70%, var(--accent) 30%);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--bg-surface) 99%, var(--accent) 1%);
}

/* ── Card Edit Mode ── */
.card-editing {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-10);
  transform: none !important;
}

.card-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
}

.card:hover .card-edit-btn,
.card-edit-btn:focus { opacity: 1; }

@media (max-width: 1023px) {
  .card-edit-btn { opacity: 1; }
}

.card-edit-btn:hover {
  color: var(--accent);
  background: var(--accent-10);
}

.card-save-success {
  animation: card-save-flash 1.5s ease-out;
}

@keyframes card-save-flash {
  0% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-20); }
  100% { border-color: var(--border-default); box-shadow: none; }
}

/* ── Identity Icon — contextual icon badge for projects/quotes/invoices ── */
.identity-icon {
  background: var(--bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}