/* ============================================
   VINIC BLOCO FORTE — Design Tokens
   Source of truth: design-system.mdx
   ============================================ */

:root {
  /* ── Orange scale ── */
  --vinic-orange-25:  #FFF8F3;
  --vinic-orange-50:  #FFF2E8;
  --vinic-orange-100: #FFE4D0;
  --vinic-orange-200: #FFCBA4;
  --vinic-orange-300: #FFAD73;
  --vinic-orange-400: #FF8B42;
  --vinic-orange-500: #F26B1D;
  --vinic-orange-600: #D85C15;
  --vinic-orange-700: #B84B10;
  --vinic-orange-800: #913A0D;
  --vinic-orange-900: #6F2E0C;

  /* ── Charcoal scale ── */
  --charcoal-25:  #F7F7F7;
  --charcoal-50:  #EFEFEF;
  --charcoal-100: #D9D9D9;
  --charcoal-200: #B8B8B8;
  --charcoal-300: #909090;
  --charcoal-400: #686868;
  --charcoal-500: #4F4F4F;
  --charcoal-600: #3A3A3A;
  --charcoal-700: #2D2D2D;
  --charcoal-800: #242424;
  --charcoal-850: #1D1D1D;
  --charcoal-900: #181818;
  --charcoal-950: #141414;

  /* ── Stone / neutral warm ── */
  --stone-25:  #FCFBF9;
  --stone-50:  #F8F6F2;
  --stone-100: #F2EEE8;
  --stone-200: #E8E1D8;
  --stone-300: #D8D0C4;
  --stone-400: #B9AF9F;
  --stone-500: #938978;
  --stone-600: #736B5F;
  --stone-700: #5B554B;

  --white: #FFFFFF;
  --black: #000000;

  /* ── Semantic: backgrounds ── */
  --background: #FFFFFF;
  --background-alt: #FCFBF9;
  --background-soft: #F8F6F2;
  --background-softer: #F2EEE8;
  --background-dark: #141414;
  --background-dark-soft: #181818;
  --background-dark-alt: #1D1D1D;

  /* ── Semantic: surfaces ── */
  --surface-card: #FFFFFF;
  --surface-card-alt: #F7F4EF;
  --surface-panel: #FBFAF7;
  --surface-dark-card: #1E1E1E;
  --surface-dark-panel: #232323;

  /* ── Semantic: foreground ── */
  --foreground: #1A1A1A;
  --foreground-soft: #3D3D3D;
  --foreground-muted: #666666;
  --foreground-faint: #8A8A8A;
  --foreground-inverse: rgba(255,255,255,0.94);
  --foreground-inverse-soft: rgba(255,255,255,0.80);
  --foreground-inverse-muted: rgba(255,255,255,0.62);

  /* ── Semantic: borders ── */
  --border: rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.18);
  --border-soft: rgba(0,0,0,0.06);
  --border-dark: rgba(255,255,255,0.12);
  --border-dark-strong: rgba(255,255,255,0.18);
  --border-dark-soft: rgba(255,255,255,0.08);

  /* ── Semantic: accent ── */
  --accent: #F26B1D;
  --accent-hover: #D85C15;
  --accent-soft: #FFF2E8;
  --accent-soft-strong: #FFE4D0;
  --accent-strong: #B84B10;
  --accent-contrast: #FFFFFF;
  --accent-glow: rgba(242,107,29,0.1);
  --accent-glow-strong: rgba(242,107,29,0.18);

  /* ── Semantic: feedback ── */
  --success: #2F8F4E;
  --warning: #D67B12;
  --info: #336CBA;
  --whatsapp: #25D366;
  --whatsapp-glow: rgba(37,211,102,0.35);
  --whatsapp-glow-strong: rgba(37,211,102,0.45);

  /* ── Misc ── */
  --ring: rgba(242,107,29,0.32);
  --overlay-dark: rgba(20,20,20,0.58);
  --overlay-darker: rgba(20,20,20,0.76);
  --line-light: rgba(0,0,0,0.08);
  --line-dark: rgba(255,255,255,0.10);

  /* ── Gradients ── */
  --hero-gradient: linear-gradient(180deg, #141414 0%, #181818 30%, #211D1A 62%, #3B2A21 100%);
  --accent-gradient: linear-gradient(90deg, #FF964F 0%, #F26B1D 42%, #D85C15 100%);
  --overlay-gradient-dark: linear-gradient(to top, rgba(20,20,20,0.82), rgba(20,20,20,0.40) 50%, rgba(20,20,20,0.10) 100%);

  /* ── Typography ── */
  --font-sans: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: clamp(3rem, 6.5vw, 6rem);
  --text-h1: clamp(2.5rem, 5vw, 4.5rem);
  --text-h2: clamp(2rem, 4vw, 3.25rem);
  --text-h3: clamp(1.375rem, 2vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-micro: 0.75rem;

  --weight-regular: 500;
  --weight-medium: 600;
  --weight-bold: 700;

  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;

  --leading-display: 0.95;
  --leading-heading: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.6;
  --leading-relaxed: 1.7;

  /* ── Layout ── */
  --container: 1280px;
  --container-wide: 1360px;
  --container-ultra: 1440px;
  --px-mobile: 24px;
  --px-tablet: 32px;
  --px-desktop: 40px;
  --px-xl: 56px;
  --px-2xl: 72px;

  /* ── Spacing ── */
  --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;

  /* ── Radius ── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.05);
  --shadow-card: 0 18px 40px rgba(0,0,0,0.07);
  --shadow-panel: 0 22px 55px rgba(0,0,0,0.08);
  --shadow-dark: 0 18px 50px rgba(0,0,0,0.26);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
  --duration-slower: 800ms;

  /* ── Navbar ── */
  --header-height-desktop: 80px;
  --header-height-mobile: 72px;
}