/* ============================================================
   BASE — Reset, Design Tokens, Tipografia
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand — cores da Ivy's D'Pil */
  --brand-900:  #2A0610;   /* vinho mais escuro */
  --brand-800:  #4A0F1A;   /* vinho escuro */
  --brand-700:  #7B1A2C;   /* vinho principal  */
  --brand-600:  #9B2235;   /* vinho médio */
  --brand-500:  #C23050;   /* vinho vibrante */

  --gold-900:   #8B6914;
  --gold-700:   #B8941A;
  --gold-500:   #C8A96E;   /* dourado principal */
  --gold-300:   #E2C98E;   /* dourado claro */
  --gold-100:   #F7F0E0;   /* dourado muito claro */

  /* Neutros */
  --neutral-950: #0F0A0C;
  --neutral-900: #1A1A1A;
  --neutral-700: #444444;
  --neutral-500: #777777;
  --neutral-300: #BBBBBB;
  --neutral-100: #F0EDE8;
  --neutral-50:  #FAF7F4;
  --white:       #FFFFFF;

  /* Semântico */
  --color-bg:        var(--neutral-50);
  --color-bg-dark:   var(--brand-800);
  --color-bg-cream:  #FDF9F7;
  --color-text:      var(--neutral-900);
  --color-text-muted: var(--neutral-500);
  --color-border:    #E8DADA;
  --color-success:   #25D366;

  /* Tipografia */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Lato', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.75rem;    /* 44px */
  --text-5xl:  3.5rem;     /* 56px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;
  --tracking-caps:  0.15em;

  /* Espaçamento */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Bordas e sombras */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 4px rgba(123, 26, 44, 0.08);
  --shadow-md:  0 4px 16px rgba(123, 26, 44, 0.12);
  --shadow-lg:  0 8px 40px rgba(123, 26, 44, 0.18);
  --shadow-xl:  0 16px 64px rgba(123, 26, 44, 0.24);

  /* Transições */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

/* ---------- Utilidades de Tipografia ---------- */
.u-serif   { font-family: var(--font-serif); }
.u-italic  { font-style: italic; }
.u-gold    { color: var(--gold-500); }
.u-brand   { color: var(--brand-700); }
.u-muted   { color: var(--color-text-muted); }
.u-center  { text-align: center; }
.u-caps    { letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* ---------- Loading skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, #f0ede8 25%, #e8e0da 50%, #f0ede8 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

.skeleton--category {
  height: 12px;
  width: 120px;
  margin-bottom: var(--space-4);
  margin-top: var(--space-6);
}

.skeleton--service {
  height: 60px;
  margin-bottom: var(--space-3);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

.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;
}