/* ============================================
   PROVALETO Social Media — Design Tokens
   Brand palette: warm amber/gold on cream/white
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --gold:        #C8920A;   /* primary gold — buttons, accents */
  --gold-light:  #E8A91A;   /* hover gold */
  --gold-pale:   #F5E6C0;   /* light tint backgrounds */
  --amber:       #D4A017;   /* mid amber for gradients */
  --cream:       #FAF6EE;   /* page background */
  --cream-dark:  #F2EAD8;   /* section alternates */
  --warm-white:  #FFFDF8;   /* cards, nav bg */
  --brown-dark:  #2C1A06;   /* primary text */
  --brown-mid:   #6B4A1E;   /* secondary text, muted */
  --brown-light: #A07840;   /* tertiary / placeholder */
  --border:      rgba(200, 146, 10, 0.18);
  --border-mid:  rgba(200, 146, 10, 0.35);

  /* ── Typography ── */
  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Layout ── */
  --nav-height:   72px;
  --section-pad:  6rem 5rem;
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-xl:    40px;
  --radius-pill:  100px;
  --ease:         0.25s ease;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 12px rgba(100, 60, 0, 0.08);
  --shadow-md:  0 6px 30px rgba(100, 60, 0, 0.12);
  --shadow-lg:  0 16px 60px rgba(100, 60, 0, 0.16);
}

@media (max-width: 900px) {
  :root { --section-pad: 4rem 1.5rem; }
}