/* ==========================================================================
   DESIGN TOKENS — Giordano Dal Bon / UGC Creator Portfolio
   Dark editorial theme. Black + rose/fuchsia accent. Playfair Display + Inter.
   ========================================================================== */

:root {
  /* Color — base */
  --color-bg: #0a0a0b;
  --color-bg-alt: #100c0e;
  --color-surface: #151316;
  --color-surface-2: #1c1a1e;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  /* Color — text */
  --color-fg: #f6f4f2;
  --color-fg-muted: #a8a3a8;
  --color-fg-faint: #6f6a70;

  /* Color — accent (rose / fuchsia) */
  --color-accent: #ec4899;
  --color-accent-soft: #f472b6;
  --color-accent-deep: #be1868;
  --color-accent-glow: rgba(236, 72, 153, 0.35);
  --color-on-accent: #16050c;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, #ec4899 0%, #f0507a 45%, #be1868 100%);
  --gradient-fade: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, #0a0a0b 100%);
  --gradient-radial-glow: radial-gradient(60% 60% at 50% 40%, rgba(236, 72, 153, 0.22) 0%, rgba(236, 72, 153, 0) 70%);

  /* Typography */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-2xs: 0.6875rem;   /* 11px — eyebrow labels */
  --fs-xs: 0.8125rem;    /* 13px */
  --fs-sm: 0.9375rem;    /* 15px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: 1.375rem;     /* 22px */
  --fs-xl: 1.75rem;      /* 28px */
  --fs-2xl: 2.25rem;     /* 36px */
  --fs-3xl: 3rem;        /* 48px */
  --fs-4xl: 4.25rem;     /* 68px */
  --fs-5xl: 6rem;        /* 96px */
  --fs-hero: clamp(3.25rem, 3rem + 5vw, 8.5rem);
  --fs-h2: clamp(2.25rem, 1.9rem + 2vw, 4rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.8vw, 2.25rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.18em;

  /* Spacing scale (8pt rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 11rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* Elevation */
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 10px 40px -8px var(--color-accent-glow);

  /* Z-index scale */
  --z-base: 0;
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
}

@media (max-width: 640px) {
  :root {
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5.5rem;
    --space-11: 7rem;
  }
}