/* Paleta Iko — hex (100% dos browsers, igual à versão React no Vercel) */
:root {
  --wine: #8b4049;
  --wine-deep: #5c262f;
  --forest: #3e5249;
  --cream: #faf7f0;
  --cream-dark: #ece4d6;
  --gold: #d2b368;
  --background: #faf7f0;
  --foreground: #2d2826;
  --card: #fdfcfa;
  --muted: #ece4d6;
  --muted-foreground: #6f6661;
  --border: #e1dace;

  /* Transparências — cream */
  --cream-5: rgba(250, 247, 240, 0.05);
  --cream-10: rgba(250, 247, 240, 0.1);
  --cream-20: rgba(250, 247, 240, 0.2);
  --cream-25: rgba(250, 247, 240, 0.25);
  --cream-30: rgba(250, 247, 240, 0.3);
  --cream-45: rgba(250, 247, 240, 0.45);
  --cream-50: rgba(250, 247, 240, 0.5);
  --cream-60: rgba(250, 247, 240, 0.6);
  --cream-75: rgba(250, 247, 240, 0.75);
  --cream-80: rgba(250, 247, 240, 0.8);
  --cream-85: rgba(250, 247, 240, 0.85);
  --cream-90: rgba(250, 247, 240, 0.9);
  --cream-95: rgba(250, 247, 240, 0.95);

  /* Transparências — wine */
  --wine-6: rgba(139, 64, 73, 0.06);
  --wine-10: rgba(139, 64, 73, 0.1);
  --wine-20: rgba(139, 64, 73, 0.2);
  --wine-30: rgba(139, 64, 73, 0.3);
  --wine-40: rgba(139, 64, 73, 0.4);

  /* Transparências — wine-deep */
  --wine-deep-40: rgba(92, 38, 47, 0.4);
  --wine-deep-60: rgba(92, 38, 47, 0.6);
  --wine-deep-70: rgba(92, 38, 47, 0.7);

  /* Transparências — forest / gold / foreground */
  --forest-10: rgba(62, 82, 73, 0.1);
  --gold-15: rgba(210, 179, 104, 0.15);
  --gold-20: rgba(210, 179, 104, 0.2);
  --gold-40: rgba(210, 179, 104, 0.4);
  --foreground-50: rgba(45, 40, 38, 0.5);
  --foreground-80: rgba(45, 40, 38, 0.8);
  --cream-dark-60: rgba(236, 228, 214, 0.6);
  --border-60: rgba(225, 218, 206, 0.6);

  /* Aliases */
  --color-wine: var(--wine);
  --color-wine-deep: var(--wine-deep);
  --color-forest: var(--forest);
  --color-cream: var(--cream);
  --color-cream-dark: var(--cream-dark);
  --color-gold: var(--gold);
  --color-bg: var(--background);
  --color-bg-alt: var(--cream-dark);
  --color-text: var(--foreground);
  --color-text-muted: var(--muted-foreground);
  --color-text-on-dark: var(--cream);
  --color-card: var(--card);
  --color-border: var(--border);

  --color-ifood: #ea1d2c;
  --color-whatsapp: #25d366;
  --color-instagram-start: #833ab4;
  --color-instagram-mid: #e1306c;
  --color-instagram-end: #f77737;

  --font-display: "Times New Roman", Times, serif;
  --font-body: "Times New Roman", Times, serif;
  --font-script: "Times New Roman", Times, serif;

  --shadow-elegant: 0 20px 60px -20px rgba(92, 38, 47, 0.35);
  --shadow-soft: 0 8px 30px -10px rgba(45, 40, 38, 0.15);
  --shadow-lg: 0 10px 40px rgba(45, 40, 38, 0.12);
  --gradient-wine: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3rem;
  --fs-hero: clamp(2.5rem, 5vw, 4.5rem);
  --fs-section: clamp(2rem, 4vw, 3rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-base: 1.6;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: clamp(4rem, 8vw, 8rem);

  --max-width: 1280px;
  --nav-height: 80px;
  --nav-height-scrolled: 64px;

  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 50%;

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.15s var(--ease-out);
  --transition-base: 0.3s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);
}

/* Browsers modernos: refinamento oklch (mesmo do build Vercel/Tailwind) */
@supports (color: oklch(50% 0.1 0)) {
  :root {
    --wine: oklch(38% 0.15 18);
    --wine-deep: oklch(28% 0.13 18);
    --forest: oklch(32% 0.06 155);
    --cream: oklch(96.5% 0.018 85);
    --cream-dark: oklch(92% 0.025 80);
    --gold: oklch(78% 0.09 75);
    --background: oklch(96.5% 0.018 85);
    --foreground: oklch(18% 0.02 30);
    --card: oklch(98.5% 0.01 85);
    --muted: oklch(92% 0.025 80);
    --muted-foreground: oklch(42% 0.03 40);
    --border: oklch(88% 0.02 70);
    --shadow-elegant: 0 20px 60px -20px oklch(28% 0.13 18 / 0.35);
    --shadow-soft: 0 8px 30px -10px oklch(18% 0.02 30 / 0.15);
    --shadow-lg: 0 10px 40px oklch(18% 0.02 30 / 0.12);
  }
}