/* ═══════════════════════════════════════════════════════
   Leo Bîrcu Weddings — Design Tokens
   Brutalist Minimal + Glassmorphism
   ═══════════════════════════════════════════════════════ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ══════ FOND ══════ */
  --bg-primary:        #000000;
  --bg-secondary:      #0A0A0A;
  --bg-elevated:       #111111;
  --bg-surface:        #161616;

  /* ══════ TEXT ══════ */
  --text-primary:      #FFFFFF;
  --text-secondary:    #A0A0A0;
  --text-muted:        #666666;
  --text-inverse:      #000000;

  /* ══════ ACCENT ══════ */
  --accent:            #E0E0E0;
  --accent-hover:      #FFFFFF;
  --accent-dim:        #333333;

  /* ══════ GLASSMORPHISM ══════ */
  --glass-bg:          rgba(255, 255, 255, 0.03);
  --glass-bg-hover:    rgba(255, 255, 255, 0.07);
  --glass-bg-active:   rgba(255, 255, 255, 0.10);
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-blur:        20px;
  --glass-blur-heavy:  40px;

  /* ══════ SHADOWS ══════ */
  --shadow-subtle:     0 2px 20px rgba(0, 0, 0, 0.3);
  --shadow-elevated:   0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-deep:       0 16px 60px rgba(0, 0, 0, 0.6);

  /* ══════ TYPOGRAPHY ══════ */
  --font-heading:      'Space Grotesk', -apple-system, sans-serif;
  --font-body:         'Inter', -apple-system, sans-serif;

  /* Heading sizes — fluid clamp */
  --h1-size:           clamp(2.75rem, 7vw, 6.5rem);
  --h1-weight:         700;
  --h1-tracking:       -0.03em;
  --h1-leading:        0.92;

  --h2-size:           clamp(1.75rem, 4.5vw, 3.5rem);
  --h2-weight:         600;
  --h2-tracking:       -0.02em;
  --h2-leading:        1.0;

  --h3-size:           clamp(1.2rem, 2.5vw, 1.6rem);
  --h3-weight:         500;
  --h3-tracking:       -0.01em;
  --h3-leading:        1.2;

  --h4-size:           clamp(1rem, 1.5vw, 1.25rem);
  --h4-weight:         500;

  /* Body */
  --body-size:         clamp(0.9375rem, 1.1vw, 1.0625rem);
  --body-weight:       400;
  --body-leading:      1.75;
  --body-tracking:     0.005em;

  /* Labels / Micro */
  --label-size:        0.6875rem;
  --label-weight:      500;
  --label-tracking:    0.14em;

  /* ══════ SPACING ══════ */
  --space-2xs:         0.25rem;     /* 4px */
  --space-xs:          0.5rem;      /* 8px */
  --space-sm:          1rem;        /* 16px */
  --space-md:          1.5rem;      /* 24px */
  --space-lg:          2.5rem;      /* 40px */
  --space-xl:          4rem;        /* 64px */
  --space-2xl:         6rem;        /* 96px */
  --space-3xl:         10rem;       /* 160px */

  /* ══════ LAYOUT ══════ */
  --container-max:     1440px;
  --container-narrow:  900px;
  --container-pad:     clamp(1.25rem, 5vw, 4rem);
  --grid-gap:          var(--space-sm);

  /* ══════ BORDERS ══════ */
  --radius-none:       0;
  --radius-sm:         2px;
  --radius-md:         4px;
  --radius-pill:       100px;

  /* ══════ TRANSITIONS ══════ */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:     150ms;
  --duration-normal:   300ms;
  --duration-slow:     600ms;
  --duration-reveal:   800ms;

  /* ══════ Z-INDEX ══════ */
  --z-base:            1;
  --z-dropdown:        10;
  --z-sticky:          50;
  --z-nav:             100;
  --z-overlay:         200;
  --z-modal:           300;
  --z-lightbox:        400;

  /* ══════ NAV ══════ */
  --nav-height:        4.5rem;
}