/* ─── Appetity Marketplace — Design Tokens ─────────────────────────────
 * Sistema baseado em Refactoring UI (Steve Schoger) + Tailwind scale.
 * Cores: brand roxo (Appetity oficial), accent laranja, gray slate.
 * Type: major-third scale. Spacing: 4pt grid. Radius/shadow em escala.
 * Não editar inline em pages — sempre usar tokens.
 */

:root {
  /* ─── Color · Brand (roxo Appetity) ───────────────────────────── */
  --c-brand-50:  #f5f3ff;
  --c-brand-100: #ede9fe;
  --c-brand-200: #ddd6fe;
  --c-brand-300: #c4b5fd;
  --c-brand-400: #a78bfa;
  --c-brand-500: #8b5cf6;
  --c-brand-600: #7c3aed;   /* default brand */
  --c-brand-700: #6d28d9;
  --c-brand-800: #5b21b6;
  --c-brand-900: #4c1d95;

  /* ─── Color · Accent (laranja) ─────────────────────────────────── */
  --c-accent-400: #fb923c;
  --c-accent-500: #f97316;   /* default accent */
  --c-accent-600: #ea580c;
  --c-accent-700: #c2410c;

  /* ─── Color · Neutrals (slate) ─────────────────────────────────── */
  --c-ink-0:   #ffffff;
  --c-ink-50:  #f8fafc;
  --c-ink-100: #f1f5f9;
  --c-ink-200: #e2e8f0;
  --c-ink-300: #cbd5e1;
  --c-ink-400: #94a3b8;
  --c-ink-500: #64748b;     /* text-muted */
  --c-ink-600: #475569;
  --c-ink-700: #334155;     /* text-default secondary */
  --c-ink-800: #1e293b;
  --c-ink-900: #0f172a;     /* text-default */

  /* ─── Color · Semantic ─────────────────────────────────────────── */
  --c-success-50:  #ecfdf5;
  --c-success-500: #10b981;
  --c-success-700: #047857;
  --c-warn-50:     #fffbeb;
  --c-warn-500:    #f59e0b;
  --c-danger-50:   #fef2f2;
  --c-danger-500:  #ef4444;

  /* ─── Type scale (rem base 16px, major third) ──────────────────── */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  3.75rem;   /* 60 */
  --fs-6xl:  4.5rem;    /* 72 */

  /* ─── Line heights ─────────────────────────────────────────────── */
  --lh-none:    1;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ─── Tracking (letter-spacing) ────────────────────────────────── */
  --tr-tighter: -0.04em;
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.025em;
  --tr-wider:   0.05em;
  --tr-widest:  0.15em;

  /* ─── Font weight ──────────────────────────────────────────────── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;
  --fw-black:    900;

  /* ─── Spacing (4pt grid) ───────────────────────────────────────── */
  --sp-0:  0;
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-7:  1.75rem;   /* 28 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-20: 5rem;      /* 80 */
  --sp-24: 6rem;      /* 96 */
  --sp-32: 8rem;      /* 128 */

  /* ─── Radius ───────────────────────────────────────────────────── */
  --r-sm:   0.375rem;  /* 6  */
  --r-md:   0.625rem;  /* 10 */
  --r-lg:   0.875rem;  /* 14 */
  --r-xl:   1.25rem;   /* 20 */
  --r-2xl:  1.75rem;   /* 28 */
  --r-full: 9999px;

  /* ─── Shadows ──────────────────────────────────────────────────── */
  --sh-sm:  0 1px 2px rgba(15,23,42,0.04);
  --sh-md:  0 4px 12px -2px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
  --sh-lg:  0 12px 32px -8px rgba(15,23,42,0.10), 0 4px 8px -4px rgba(15,23,42,0.05);
  --sh-xl:  0 24px 60px -16px rgba(15,23,42,0.14), 0 8px 16px -8px rgba(15,23,42,0.06);
  --sh-2xl: 0 40px 100px -24px rgba(15,23,42,0.22);
  --sh-brand: 0 12px 32px -8px rgba(124,58,237,0.32);
  --sh-accent: 0 12px 32px -8px rgba(249,115,22,0.34);

  /* ─── Container ────────────────────────────────────────────────── */
  --container-max: 1180px;
  --container-pad: var(--sp-5);

  /* ─── Transitions ──────────────────────────────────────────────── */
  --t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Z-index ──────────────────────────────────────────────────── */
  --z-sticky: 50;
  --z-modal:  100;
}

/* ─── Reset mínimo ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-ink-900);
  background: var(--c-ink-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.serif { font-family: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); }

/* Sr-only acessibilidade */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skeleton loader animado */
.skeleton {
  background: linear-gradient(90deg, var(--c-ink-100) 25%, var(--c-ink-200) 50%, var(--c-ink-100) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Focus-visible global */
:focus-visible {
  outline: 2px solid var(--c-brand-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}