/* ============================================================
   DESIGN SYSTEM — BV Portfolio
   Tokens: Colors, Typography, Spacing, Transitions, Breakpoints
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-black:       #000000;
  --color-dark:        #1f2937;
  --color-dark-2:      #374151;
  --color-dark-3:      #4b5563;
  --color-gray-dark:   #6b7280;
  --color-gray:        #9ca3af;
  --color-gray-mid:    #d1d5db;
  --color-gray-light:  #e5e7eb;
  --color-cream:       #f9fafb;
  --color-cream-dark:  #f3f4f6;
  --color-white:       #ffffff;
  --color-offwhite:    #f8fafc;

  /* Accent — Purple */
  --color-accent:      #7e22ce;
  --color-accent-soft: #9333ea;
  --color-accent-dim:  #6b21a8;

  /* Semantic */
  --color-bg:          var(--color-white);
  --color-bg-alt:      var(--color-cream);
  --color-bg-card:     var(--color-white);
  --color-text:        var(--color-dark);
  --color-text-muted:  var(--color-gray-dark);
  --color-text-dim:    var(--color-gray);
  --color-border:      rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.15);
  --color-overlay:     rgba(255, 255, 255, 0.85);

  /* ── Typography ── */
  --font-primary:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Plus Jakarta Sans', 'Manrope', sans-serif;

  /* Fluid type scale using clamp() */
  --text-xs:    clamp(0.7rem,  0.65rem + 0.25vw,  0.8rem);
  --text-sm:    clamp(0.8rem,  0.75rem + 0.3vw,   0.9rem);
  --text-base:  clamp(0.9rem,  0.85rem + 0.3vw,   1rem);
  --text-md:    clamp(1rem,    0.9rem + 0.4vw,     1.15rem);
  --text-lg:    clamp(1.1rem,  1rem + 0.5vw,       1.35rem);
  --text-xl:    clamp(1.3rem,  1.1rem + 0.8vw,     1.75rem);
  --text-2xl:   clamp(1.6rem,  1.3rem + 1.2vw,     2.25rem);
  --text-3xl:   clamp(2rem,    1.5rem + 2vw,       3rem);
  --text-4xl:   clamp(2.5rem,  1.8rem + 3vw,       4rem);
  --text-5xl:   clamp(3rem,    2rem + 4vw,         5.5rem);
  --text-hero:  clamp(3.5rem,  2.2rem + 5.5vw,     7rem);

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  --tracking-tight:   -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* ── Spacing (8px 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 */
  --space-32:  8rem;     /* 128px */
  --space-40:  10rem;    /* 160px */

  /* Section padding - fluid */
  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --section-pad-x: clamp(1.5rem, 5vw, 6rem);

  /* Container */
  --container-max:   1280px;
  --container-wide:  1440px;
  --container-narrow: 800px;

  /* ── Layout ── */
  --navbar-height: 72px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   200ms;
  --duration-base:   400ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 20px 40px -8px rgba(0, 0, 0, 0.15), 0 0 60px rgba(0, 0, 0, 0.05);
  --shadow-smoke: 0 30px 80px -10px rgba(0, 0, 0, 0.18);
  --shadow-glow: 0 0 40px rgba(126, 34, 206, 0.08);

  /* ── Z-index scale ── */
  --z-base:     1;
  --z-above:    10;
  --z-navbar:   100;
  --z-modal:    200;
  --z-cursor:   300;
  --z-loader:   400;
}