/* ============================================================
   GIULIA PRIVÉ — DESIGN TOKENS
   Source of truth for color, type, spacing, motion.
   Update here only; never hard-code values elsewhere.
   ============================================================ */

:root {
  /* ---- COLOR ---- */
  --gp-black:        #0A0A0A;
  --gp-ink:          #1A1A1A;
  --gp-charcoal:     #4A4A4A;
  --gp-stone:        #8A8A8A;
  --gp-hair:         #D9CFBE;

  --gp-gold:         #D4B06A;
  --gp-gold-dark:    #B89455;
  --gp-gold-light:   #E5C994;

  --gp-ivory:        #F8F5EF;
  --gp-ivory-dark:   #EFE9DD;
  --gp-taupe:        #C8B9A6;

  --gp-emerald:      #0F3D35;
  --gp-emerald-dark: #082823;

  --gp-white:        #FFFFFF;

  /* ---- TYPOGRAPHY ---- */
  --gp-serif:        "Cormorant Garamond", "EB Garamond", "Garamond", "Times New Roman", serif;
  --gp-sans:         "Inter", "Helvetica Neue", "Arial", sans-serif;
  --gp-mono:         "JetBrains Mono", "Consolas", monospace;

  --gp-display-xl:   clamp(3.5rem, 7vw, 6rem);     /* hero */
  --gp-display-lg:   clamp(2.5rem, 5vw, 4rem);     /* H1 */
  --gp-display-md:   clamp(2rem, 3.5vw, 2.75rem);  /* H2 */
  --gp-heading:      clamp(1.5rem, 2.5vw, 2rem);   /* H3 */
  --gp-subhead:      clamp(1.125rem, 1.5vw, 1.25rem);
  --gp-body:         1rem;
  --gp-small:        0.875rem;
  --gp-eyebrow:      0.75rem;

  --gp-leading-tight:   1.15;
  --gp-leading-normal:  1.5;
  --gp-leading-relaxed: 1.75;

  --gp-tracking-tight:  -0.01em;
  --gp-tracking-normal: 0;
  --gp-tracking-wide:   0.1em;
  --gp-tracking-wider:  0.2em;
  --gp-tracking-widest: 0.25em;

  /* ---- SPACING (8-pt grid) ---- */
  --gp-space-0: 0;
  --gp-space-1: 0.5rem;     /*  8 */
  --gp-space-2: 1rem;       /* 16 */
  --gp-space-3: 1.5rem;     /* 24 */
  --gp-space-4: 2rem;       /* 32 */
  --gp-space-5: 3rem;       /* 48 */
  --gp-space-6: 4rem;       /* 64 */
  --gp-space-7: 6rem;       /* 96 */
  --gp-space-8: 8rem;       /* 128 */

  /* ---- LAYOUT ---- */
  --gp-container-xl: 1400px;
  --gp-container-lg: 1200px;
  --gp-container-md: 960px;
  --gp-container-sm: 720px;
  --gp-gutter:       1.5rem;

  /* ---- MOTION ---- */
  --gp-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --gp-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --gp-duration-fast: 200ms;
  --gp-duration:      400ms;
  --gp-duration-slow: 700ms;

  /* ---- ELEVATION ---- */
  --gp-shadow-sm:    0 1px 2px rgba(10, 10, 10, 0.05);
  --gp-shadow-md:    0 4px 12px rgba(10, 10, 10, 0.08);
  --gp-shadow-lg:    0 12px 32px rgba(10, 10, 10, 0.12);

  /* ---- BORDER ---- */
  --gp-border:       1px solid var(--gp-hair);
  --gp-border-gold:  1px solid var(--gp-gold);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */

.gp-container {
  width: 100%;
  max-width: var(--gp-container-xl);
  margin: 0 auto;
  padding: 0 var(--gp-gutter);
}

.gp-section {
  padding: var(--gp-space-7) 0;
}

@media (max-width: 768px) {
  .gp-section { padding: var(--gp-space-5) 0; }
}

/* Gold horizontal rule */
.gp-rule {
  border: 0;
  border-top: 1px solid var(--gp-gold);
  width: 60px;
  margin: var(--gp-space-3) 0;
}

.gp-rule--center { margin-left: auto; margin-right: auto; }