/* ==========================================================================
   NARTTATTOO — DESIGN TOKENS
   Fonte única da verdade para cores, tipografia, espaçamento e efeitos.
   ========================================================================== */

:root {
  /* ---- Cores base ---- */
  --color-black: #050505;
  --color-black-soft: #0c0c0d;
  --color-surface-1: #121214;
  --color-surface-2: #1b1b1e;
  --color-surface-3: #242427;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-white: #f6f5f2;
  --color-white-dim: rgba(246, 245, 242, 0.72);
  --color-white-faint: rgba(246, 245, 242, 0.45);

  /* ---- Vinho (cor de assinatura) ---- */
  --color-wine: #7a0c22;
  --color-wine-light: #a51631;
  --color-wine-dark: #4a0715;
  --color-wine-glow: rgba(165, 22, 49, 0.45);

  /* ---- Neon (uso pontual) ---- */
  --color-neon: #ff2f56;
  --color-neon-glow: rgba(255, 47, 86, 0.35);

  /* ---- Glass ---- */
  --glass-bg: rgba(18, 18, 20, 0.55);
  --glass-bg-light: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(18px);

  /* ---- Tipografia ---- */
  --font-display: "Cormorant Garamond", "Playfair Display", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1: clamp(2.75rem, 6vw, 6.5rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.75rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 2rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.375rem);
  --fs-body-lg: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.08;
  --lh-normal: 1.55;

  /* ---- Espaçamento ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --section-padding: clamp(5rem, 10vw, 9rem);
  --container-width: 1320px;
  --container-padding: clamp(1.5rem, 6vw, 3rem);

  /* ---- Raio e bordas ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* ---- Sombra ---- */
  --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-wine: 0 20px 50px -15px var(--color-wine-glow);
  --shadow-elevated: 0 30px 80px -20px rgba(0, 0, 0, 0.75);

  /* ---- Transições ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  /* ---- Camadas ---- */
  --z-cursor: 9999;
  --z-modal: 900;
  --z-header: 500;
  --z-lightbox: 950;

  color-scheme: dark;
}