/* ==========================================================================
   _variables.css — Design Tokens
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

:root {
  /* -------------------------------------------------------------------------
     COLORS — Red Scale
     ------------------------------------------------------------------------- */
  --red-5F070B: #5f070b; /* Black Cherry    */
  --red-980B12: #980b12; /* Deep Crimson    */
  --red-BF0D16: #bf0d16; /* Mahogany Red    */
  --red-D11019: #d11019; /* Flag Red ★ Ana  */
  --red-F53D46: #f53d46; /* Strawberry Red  */
  --red-F8777E: #f8777e; /* Light Coral     */
  --red-FA9EA3: #fa9ea3; /* Cotton Candy    */
  --red-FCC5C8: #fcc5c8; /* Cotton Rose     */
  --red-FEECED: #feeced; /* Lavender Blush  */

  /* COLORS — Neutral Scale
     ------------------------------------------------------------------------- */
  --neutral-1A1818: #1a1818; /* Carbon Black  ★ Ana  */
  --neutral-292929: #292929; /* Graphite              */
  --neutral-3D3D3D: #3d3d3d; /* Gun Metal             */
  --neutral-4E4E4E: #4e4e4e; /* No Name               */
  --neutral-141414: #141414; /* Charcoal       ★ Ana  */
  --neutral-666666: #666666; /* Dim Grey              */
  --neutral-858585: #858585; /* Grey Olive            */
  --neutral-A3A3A3: #a3a3a3; /* Silver                */
  --neutral-E0E0E0: #e0e0e0; /* Alabaster Grey        */
  --neutral-F5F5F5: #f5f5f5; /* White Smoke           */
  --neutral-FFFFFF: #ffffff; /* White          ★ Ana  */

  /* COLORS — Social Brands
     ------------------------------------------------------------------------- */
  --brand-linkedin: #0a66c2;
  --brand-instagram: #d62976;
  --brand-instagram-bg: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  --brand-facebook: #1877f2;
  --brand-youtube: #ff0000;
  --brand-x: #0f1419;

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --df-text-fs-80: clamp(2.5rem, 8vw, 5rem);
  --df-text-fs-60: clamp(2rem, 6vw, 3.75rem);
  --df-text-fs-50: clamp(1.75rem, 5vw, 3.125rem);
  --df-text-fs-44: clamp(1.38rem, 3vw, 2.75rem);
  --df-text-fs-32: clamp(1.25rem, 3vw, 2rem);
  --df-text-fs-28: clamp(1.125rem, 2.5vw, 1.75rem);
  --df-text-fs-22: clamp(1rem, 2vw, 1.375rem);
  --df-text-fs-18: clamp(0.879rem, 1.5vw, 1.125rem);
  --df-text-fs-16: clamp(0.875rem, 1.2vw, 1rem);
  --df-text-fs-14: clamp(0.75rem, 1vw, 0.875rem);
  --df-text-fs-12: clamp(0.65rem, 0.8vw, 0.75rem);
  --df-text-fs-10: clamp(0.5rem, 0.6vw, 0.625rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.03em;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
  --ls-widest: 0.2em;
  /* -------------------------------------------------------------------------
     SPACING — 4px base grid
     ------------------------------------------------------------------------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* Fluid section padding — media query'siz */
  --section-sm: clamp(2rem, 5vw, 4rem);
  --section-md: clamp(3rem, 8vw, 6rem);
  --section-lg: clamp(4rem, 10vw, 8rem);

  /* -------------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------------- */
  --radius-sm: 0.20rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(26, 24, 24, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(26, 24, 24, 0.1), 0 2px 4px -2px rgba(26, 24, 24, 0.1);
  --shadow-lg:
    0 10px 15px -3px rgba(26, 24, 24, 0.1), 0 4px 6px -4px rgba(26, 24, 24, 0.1);
  --shadow-red: 0 4px 14px rgba(209, 16, 25, 0.25);

  /* -------------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

@media (max-width: 768.98px) {
    :root {
        --bs-gutter-x: 30px !important;
    }
}