/* El Cantico — Premium design tokens
   Ceremonial palette: pearl/ivory dominant, navy for depth, champagne gold accent.
   Drop into the storefront and reference these variables everywhere. */

:root {
  /* Surfaces — pearl/ivory dominant (the premium signal) */
  --ivory:      #FAF6EF;   /* page background */
  --pearl:      #FFFFFF;   /* cards, elevated surfaces */
  --cream-2:    #F2EBDE;   /* subtle alternate sections */

  /* Depth / text — the navy you liked, used with restraint */
  --navy:       #1E2761;   /* primary text, headings */
  --navy-deep:  #141B38;   /* footer, deep contrast blocks */
  --ink-soft:   #6B6E7B;   /* muted body text */

  /* Accents — champagne gold for ceremonial premium */
  --gold:       #C9A86A;   /* hairlines, flourishes, premium touches */
  --gold-soft:  #E4D3A8;   /* light gold tints, hovers */

  /* Emotional micro-accent — dusty rose, used VERY sparingly */
  --rose:       #C57B6A;

  /* Lines & shadows */
  --line:       #EAE3D6;   /* hairline borders on cream */
  --shadow-sm:  0 2px 14px rgba(30,39,97,.06);
  --shadow-md:  0 12px 40px rgba(30,39,97,.10);

  /* Typography */
  --font-serif: 'Fraunces', 'Playfair Display', Georgia, serif;  /* headlines */
  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;     /* body / UI */

  /* Radii & rhythm */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --section-gap: 112px;
}

/* CTA convention: primary = navy on ivory (premium, high-contrast).
   Gold = hairline accents + flourishes. Rose = tiny emotional highlights only.
   NEVER use loud coral as a fill. */

.btn-primary  { background: var(--navy);  color: var(--ivory); }
.btn-ghost    { background: transparent;  color: var(--navy); border: 1.5px solid var(--navy); }
.accent-gold  { color: var(--gold); }
.hairline     { border-color: var(--line); }