/*
 * Design System global — Ericka Pessôa
 * Tokens visuais reutilizáveis para cores, tipografia, ritmo e interação.
 */

:root {
  /* Cores base — vinho */
  --color-wine-950: #2f0b18;
  --color-wine-900: #3f1022;
  --color-wine-800: #52182e;
  --color-wine-700: #68213a;
  --color-wine-600: #7a2b45;

  /* Cores base — nude */
  --color-nude-50: #fcf8f5;
  --color-nude-100: #f6ece6;
  --color-nude-200: #ecd9ce;
  --color-nude-300: #dfc2b3;
  --color-nude-400: #cfa48f;

  /* Cores base — champagne */
  --color-champagne-100: #f5eedc;
  --color-champagne-200: #eaddbd;
  --color-champagne-300: #d9c28f;
  --color-champagne-400: #c4a96c;
  --color-champagne-500: #a98b4f;

  /* Cores base — neutros quentes */
  --color-white: #ffffff;
  --color-off-white: #fbf8f5;
  --color-surface: #f8f2ee;
  --color-text-primary: #2f2529;
  --color-text-secondary: #6f6267;
  --color-text-muted: #95888d;
  --color-border: #e7dcd6;
  --color-border-strong: #d6c6be;

  /* Cores base — estados */
  --color-success: #3f6d55;
  --color-error: #8a2e3e;
  --color-warning: #9c743a;
  --color-info: #66566f;

  /* Tokens semânticos */
  --color-background: var(--color-off-white);
  --color-background-alt: var(--color-nude-100);
  --color-background-dark: var(--color-wine-950);
  --color-surface-primary: var(--color-white);
  --color-surface-secondary: var(--color-surface);
  --color-heading: var(--color-wine-950);
  --color-body: var(--color-text-primary);
  --color-muted: var(--color-text-secondary);
  --color-accent: var(--color-champagne-400);
  --color-accent-hover: var(--color-champagne-500);
  --color-button-primary: var(--color-wine-800);
  --color-button-primary-hover: var(--color-wine-950);
  --color-button-primary-text: var(--color-white);
  --color-button-secondary: var(--color-champagne-100);
  --color-button-secondary-hover: var(--color-champagne-200);
  --color-button-secondary-text: var(--color-wine-950);
  --color-link: var(--color-wine-700);
  --color-link-hover: var(--color-wine-950);
  --color-focus: var(--color-champagne-400);
  --color-overlay: rgba(47, 11, 24, 0.72);
  --color-shadow: rgba(47, 11, 24, 0.1);

  /* Tipografia */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1;
  --line-height-heading: 1.08;
  --line-height-body: 1.7;
  --line-height-relaxed: 1.75;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: clamp(1rem, 0.98rem + 0.12vw, 1.075rem);
  --font-size-lg: clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);
  --font-size-xl: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem);
  --font-size-2xl: clamp(1.75rem, 1.5rem + 0.8vw, 2.2rem);
  --font-size-3xl: clamp(2.15rem, 1.8rem + 1.25vw, 3rem);
  --font-size-4xl: clamp(2.75rem, 2.1rem + 2vw, 4rem);
  --font-size-5xl: clamp(3.2rem, 2.5rem + 2.6vw, 5rem);
  --font-size-hero: clamp(3.4rem, 2.5rem + 3.2vw, 5.8rem);

  /* Escala tipográfica semântica */
  --font-size-navigation: clamp(0.875rem, 0.84rem + 0.1vw, 0.95rem);
  --font-size-button: clamp(0.9rem, 0.87rem + 0.1vw, 0.975rem);
  --font-size-card-title: clamp(1.2rem, 1.1rem + 0.25vw, 1.45rem);
  --font-size-card-body: clamp(0.95rem, 0.92rem + 0.1vw, 1rem);
  --font-size-section-title: clamp(2.6rem, 2rem + 1.8vw, 4rem);
  --font-size-hero-title: clamp(3.35rem, 2.45rem + 3vw, 5.6rem);
  --font-size-footer: clamp(0.875rem, 0.84rem + 0.1vw, 0.95rem);
  --content-reading-width: 65ch;
  --heading-reading-width: 15ch;

  /* Espaçamentos — base de 4px */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --section-space-sm: clamp(3.5rem, 2.75rem + 3vw, 5rem);
  --section-space-md: clamp(5rem, 3.5rem + 5vw, 8rem);
  --section-space-lg: clamp(6rem, 4rem + 7vw, 10rem);

  /* Containers */
  --container-xs: 32rem;
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 75rem;
  --container-2xl: 87.5rem;
  --container-padding: clamp(1rem, 3vw, 2rem);

  /* Raios de borda */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Bordas e divisores */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-subtle: var(--border-width-thin) solid rgba(104, 33, 58, 0.1);
  --border-default: var(--border-width-thin) solid var(--color-border);
  --border-accent: var(--border-width-thin) solid var(--color-champagne-300);

  /* Sombras suaves e quentes */
  --shadow-xs: 0 2px 8px rgba(47, 11, 24, 0.04);
  --shadow-sm: 0 6px 18px rgba(47, 11, 24, 0.06);
  --shadow-md: 0 12px 32px rgba(47, 11, 24, 0.08);
  --shadow-lg: 0 20px 48px rgba(47, 11, 24, 0.1);
  --shadow-xl: 0 28px 72px rgba(47, 11, 24, 0.14);
  --shadow-focus: 0 0 0 4px rgba(196, 169, 108, 0.28);

  /* Transições */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 700ms;
  --ease-standard: ease;
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Camadas */
  --z-base: 0;
  --z-content: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-overlay: 700;
  --z-modal: 900;
  --z-toast: 1000;

  /* Controles */
  --control-height-sm: 2.5rem;
  --control-height-md: 3rem;
  --control-height-lg: 3.5rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.5rem;
  --icon-size-lg: 2rem;
  --button-padding-inline: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --button-padding-block: 0.75rem;

  /* Header */
  --header-height-mobile: 4.75rem;
  --header-height-desktop: 5.5rem;
  --header-background: rgba(251, 248, 245, 0.94);
  --header-background-scrolled: rgba(255, 255, 255, 0.96);
  --header-border: var(--border-subtle);
  --header-shadow: var(--shadow-sm);

  /* Hero */
  --hero-min-height: 100svh;
  --hero-background: var(--color-wine-950);
  --hero-text-color: var(--color-white);
  --hero-accent-color: var(--color-champagne-200);
  --hero-image-max-width: 37.125rem;

  /* Formulários */
  --input-background: var(--color-white);
  --input-border: var(--color-border);
  --input-border-hover: var(--color-border-strong);
  --input-border-focus: var(--color-wine-700);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-muted);
  --input-error: var(--color-error);
  --input-radius: var(--radius-sm);
  --input-height: var(--control-height-md);
  --textarea-min-height: 8rem;

  /* Gradientes discretos */
  --gradient-hero: linear-gradient(135deg, var(--color-wine-950) 0%, var(--color-wine-900) 45%, var(--color-wine-800) 100%);
  --gradient-wine: linear-gradient(145deg, var(--color-wine-950) 0%, var(--color-wine-800) 100%);
  --gradient-nude: linear-gradient(135deg, var(--color-nude-50) 0%, var(--color-nude-100) 100%);
  --gradient-champagne: linear-gradient(135deg, var(--color-champagne-100) 0%, var(--color-champagne-200) 100%);
  --gradient-overlay: linear-gradient(90deg, rgba(47, 11, 24, 0.88) 0%, rgba(47, 11, 24, 0.52) 55%, rgba(47, 11, 24, 0.16) 100%);
  --gradient-section-dark: linear-gradient(160deg, var(--color-wine-950) 0%, var(--color-wine-900) 62%, var(--color-wine-800) 100%);

  /* Texturas geradas em CSS */
  --texture-dot-color: rgba(245, 238, 220, 0.14);
  --texture-line-color: rgba(217, 194, 143, 0.12);
  --texture-opacity: 0.16;
  --texture-size: 1.125rem;

  /* Acessibilidade */
  --focus-ring-color: var(--color-focus);
  --focus-ring-width: 3px;
  --focus-ring-offset: 4px;

  /* Movimento */
  --motion-distance-sm: 0.5rem;
  --motion-distance-md: 1.5rem;
  --motion-distance-lg: 2.5rem;

  /*
   * Aliases legados temporários.
   * Mantêm components.css e style.css funcionais durante a migração.
   */
  --wine-950: var(--color-wine-950);
  --wine-900: var(--color-wine-900);
  --wine-800: var(--color-wine-800);
  --wine-700: var(--color-wine-700);
  --nude-50: var(--color-nude-50);
  --nude-100: var(--color-nude-100);
  --nude-200: var(--color-nude-200);
  --champagne: var(--color-nude-400);
  --champagne-light: var(--color-champagne-100);
  --white: var(--color-white);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: rgba(63, 16, 34, 0.14);
  --success: var(--color-success);
  --font-title: var(--font-display);
  --container: var(--container-xl);
  --header-height: clamp(var(--header-height-mobile), 4.25rem + 1vw, var(--header-height-desktop));
  --shadow-soft: var(--shadow-lg);
  --shadow-card: var(--shadow-md);
  --transition: var(--duration-normal) var(--ease-standard);
}