MeBox/web/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body, #root { height: 100%; }

body {
  background-color: #f9fafb; /* Premium Swiss Editorial Light/Slate Background */
  color: #111827;            /* Deep Graphite Charcoal Body Text */
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Selection ─── */
::selection {
  background: rgba(201, 149, 74, 0.2);
  color: #111827;
}

/* ─── Focus Ring ─── */
*:focus-visible {
  outline: 2px solid #c9954a;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #c9954a; }

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@layer components {
  /* ── Unified Swiss-Editorial Cards ── */
  .card {
    @apply rounded-2xl bg-white border border-gray-200/80 shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)] p-4 sm:p-6;
  }
  .card-hover {
    @apply card transition-all duration-300 ease-out hover:border-gray-300 hover:shadow-[0_12px_32px_rgba(17,24,39,0.04),0_4px_12px_rgba(17,24,39,0.01)] hover:-translate-y-1;
  }
  .card-elevated {
    @apply card shadow-[0_20px_40px_rgba(17,24,39,0.05),0_1px_3px_rgba(17,24,39,0.01)];
  }

  /* ── Glassmorphic Bright Panels ── */
  .glass-panel {
    @apply rounded-2xl bg-white border border-gray-200 shadow-sm p-4 sm:p-6;
  }
  .glass-card {
    @apply rounded-2xl bg-white border border-gray-200 shadow-sm p-4 sm:p-6;
  }
  .glass-card-elevated {
    @apply rounded-2xl bg-white border border-gray-200 shadow-md p-4 sm:p-6;
  }

  /* ── Input Fields Redesign ── */
  .input-field {
    @apply w-full rounded-xl border border-gray-200 bg-gray-50/50 px-4 py-3 text-sm text-gray-900
      placeholder:text-gray-400 outline-none transition-all duration-300 ease-out
      focus:border-brand-500 focus:bg-white focus:ring-4 focus:ring-brand-100/50;
  }
  .input-label {
    @apply block mb-1.5 text-xs font-bold uppercase tracking-widest text-gray-500;
  }

  /* ── Premium Editorial Buttons Redesign ── */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3
      text-sm font-bold text-white transition-all duration-300 ease-out shadow-sm
      hover:bg-[#1f2937] hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]
      disabled:cursor-not-allowed disabled:opacity-40 disabled:translate-y-0;
  }
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5
      text-sm font-semibold text-gray-600 transition-all duration-200 ease-out
      hover:bg-gray-100 hover:text-gray-900 active:scale-[0.98];
  }
  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-gray-200/90
      bg-white px-4 py-2.5 text-sm font-bold text-gray-700 transition-all duration-300 ease-out shadow-sm
      hover:border-gray-300 hover:text-gray-900 hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98];
  }

  /* ── Badges Redesign ── */
  .badge {
    @apply inline-flex items-center rounded-full px-3 py-1 text-2xs font-bold uppercase tracking-wider;
  }
  .badge-brand { @apply badge bg-brand-50 text-brand-700 border border-brand-100/30; }
  .badge-sage  { @apply badge bg-sage-50 text-sage-700 border border-sage-100/30; }
  .badge-neutral { @apply badge bg-gray-100 text-gray-600 border border-gray-200/50; }

  /* ── Page Headings ── */
  .page-heading  { @apply font-display text-3xl font-extrabold tracking-tight text-gray-900; }
  .page-subtitle { @apply mt-1 text-sm text-gray-500; }

  /* ── Data Tables Redesign ── */
  .data-table { @apply w-full text-left text-sm border-collapse; }
  .data-table thead { @apply border-b border-gray-200 bg-gray-50/70; }
  .data-table th { @apply px-5 py-4 text-xs font-bold uppercase tracking-wider text-gray-500 whitespace-nowrap; }
  .data-table td { @apply px-5 py-4 text-gray-700 border-b border-gray-100 max-w-xs truncate; }
  .data-table tbody tr { @apply transition-colors hover:bg-gray-50/50; }

  /* ── Dividers ── */
  .divider { @apply border-t border-gray-200/80; }

  /* ── Backward Compatibility ── */
  .surface-card { @apply card; }
  .surface-card-elevated { @apply card-elevated; }
  .field-input { @apply input-field; }
  .field-label  { @apply input-label; }
  .amber-btn { @apply btn-outline; }
  .amber-btn--solid { @apply btn-primary; }
  .amber-btn--ghost { @apply btn-ghost; }
  .neon-button { @apply btn-outline; }
  .input-base { @apply input-field; }
  .warm-divider { @apply divider; }
}