/**
 * ==========================================================================
 * ETERNIZE — DESIGN SYSTEM VARIABLES & TOKENS (v3 — HUMAN WARMTH REDESIGN)
 * ==========================================================================
 * Paleta: Orgânica, afetiva, nostálgica e contemporânea.
 * Baseada em Creme + Terracota + Verde-Sálvia + Marrom-Café.
 * Foco: Memória, afeto, música como experiência humana — não tecnologia.
 */

:root {
  /* ---- FUNDO / SUPERFÍCIES (sólidas, sem glassmorphism) ---- */
  --color-bg-deep:     #1a1612;
  --color-bg-base:     #f7f3ee;
  --color-bg-surface:  #efe9e1;
  --color-bg-elevated: #e8e0d5;
  --color-bg-card:     #faf6f1;
  --color-bg-warm:     #fdf8f3;
  --color-bg-input:    #ffffff;

  /* ---- TERRACOTA (cor primária / ação) ---- */
  --color-terra-100: #fef0e8;
  --color-terra-200: #fcdcc8;
  --color-terra-300: #f0b896;
  --color-terra-400: #d98a5e;
  --color-terra-500: #c46d3b;
  --color-terra-600: #a8552a;
  --color-terra-700: #7d3d1e;
  --color-terra-glow:         rgba(196, 109, 59, 0.15);
  --color-terra-gradient:     linear-gradient(135deg, #f0b896 0%, #c46d3b 60%, #a8552a 100%);
  --color-terra-gradient-h:   linear-gradient(90deg, #d98a5e 0%, #c46d3b 100%);

  /* ---- VERDE SÁLVIA (accent secundário / equilíbrio) ---- */
  --color-sage-100: #eef3ed;
  --color-sage-200: #d4ddd2;
  --color-sage-300: #a8bfa5;
  --color-sage-400: #7d9a78;
  --color-sage-500: #5c7a56;
  --color-sage-glow: rgba(92, 122, 86, 0.12);

  /* ---- CREME / DOURADO SUAVE (destaques sutis) ---- */
  --color-cream-100: #fffdf8;
  --color-cream-200: #faf5eb;
  --color-cream-300: #f0e6d4;
  --color-cream-400: #dcc9a8;
  --color-cream-glow: rgba(220, 201, 168, 0.18);

  /* ---- MARROM CAFÉ (texto sobre fundo claro) ---- */
  --color-coffee-900: #1a1612;
  --color-coffee-800: #2d2520;
  --color-coffee-700: #3e342c;
  --color-coffee-600: #524639;

  /* ---- TEXTO ---- */
  --color-text-primary:   #2d2520;
  --color-text-secondary: #524639;
  --color-text-muted:     #8a7e72;
  --color-text-subtle:    #b5aa9c;
  --color-text-inverse:   #faf6f1;
  --color-text-accent:    var(--color-terra-500);

  /* ---- WHATSAPP / CONVERSÃO ---- */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #1ebd5a;
  --color-whatsapp-glow:  rgba(37, 211, 102, 0.20);

  /* ---- BORDAS ---- */
  --color-border-subtle:     rgba(45, 37, 32, 0.08);
  --color-border-medium:     rgba(45, 37, 32, 0.14);
  --color-border-strong:     rgba(45, 37, 32, 0.22);
  --color-border-terra:      rgba(196, 109, 59, 0.30);
  --color-border-terra-hover:rgba(196, 109, 59, 0.55);
  --color-border-sage:       rgba(92, 122, 86, 0.25);

  /* ---- TIPOGRAFIA ---- */
  --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-sans:  'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ---- ESPAÇAMENTOS (sistema mais generoso e respirável) ---- */
  --space-2xs: 0.25rem;   /* 4px  */
  --space-xs:  0.5rem;    /* 8px  */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.75rem;   /* 28px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 8rem;      /* 128px */

  /* ---- BORDER RADIUS (mais orgânico, assimétrico) ---- */
  --radius-xs:   6px;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 9999px;
  --radius-organic: 24px 18px 28px 16px;

  /* ---- SOMBRAS (suaves, difusas, quentes) ---- */
  --shadow-sm:       0 2px 8px rgba(45, 37, 32, 0.06);
  --shadow-md:       0 8px 24px rgba(45, 37, 32, 0.08);
  --shadow-lg:       0 16px 48px rgba(45, 37, 32, 0.10);
  --shadow-xl:       0 32px 80px rgba(45, 37, 32, 0.12);
  --shadow-terra:    0 8px 32px rgba(196, 109, 59, 0.12);
  --shadow-terra-lg: 0 20px 60px rgba(196, 109, 59, 0.18);
  --shadow-inner:    inset 0 1px 0 rgba(255,255,255,0.5);
  --shadow-whatsapp: 0 8px 28px rgba(37,211,102,0.20);

  /* ---- TEXTURA (grain sutil para dar tato humano) ---- */
  --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

  /* ---- TRANSIÇÕES (mais naturais, menos mecânicas) ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  --transition-fast:   0.2s var(--ease-in-out);
  --transition-normal: 0.4s var(--ease-out);
  --transition-slow:   0.7s var(--ease-out);
  --transition-bounce: 0.5s var(--ease-bounce);

  /* ---- CONTAINERS ---- */
  --container-max-width:    1120px;
  --container-narrow-width: 740px;
  --container-padding:      1.75rem;

  /* ---- Z-INDEX ---- */
  --z-background:     -1;
  --z-normal:          1;
  --z-elevated:       10;
  --z-sticky-header: 100;
  --z-sticky-bottom: 900;
  --z-modal:        1000;
  --z-overlay:      1100;
}