/* East Coast Sparrow & Soap — design tokens
   Carried over from the print design system used for the beginner's manual
   and business cards. Colors are sampled from the logo artwork. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap');

:root {
  /* --- grounds --- */
  --paper:        #F2ECE2;
  --paper-warm:   #EFE8DC;
  --card:         #FAF6EE;
  --card-2:       #F6F1E6;

  /* --- ink --- */
  --espresso:     #3B3125;
  --sepia:        #5E4E3B;
  --ink:          #4A4034;
  --ink-soft:     #6A5F51;

  /* --- accent --- */
  --gold:         #A98B55;   /* decorative only on cream: ~2.5:1 */
  --gold-deep:    #8A6E3E;   /* use for small gold type */
  --sage:         #7E856F;

  /* --- lines --- */
  --rule:         #D9D0BE;
  --rule-soft:    #E4DCCC;

  /* --- tile suits, if tile artwork is used --- */
  --dot:          #6E7C8A;
  --bam:          #6B7A5C;
  --crak:         #8C5A4A;

  /* --- type --- */
  --display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --body:    'Lato', system-ui, -apple-system, sans-serif;

  --track-display: 0.30em;  /* matches the SPARROW & SOAP wordmark */
  --track-eyebrow: 0.24em;

  /* --- scale (1.25) --- */
  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.563rem;
  --step-3:  1.953rem;
  --step-4:  2.441rem;
  --step-5:  3.052rem;

  /* --- space --- */
  --space-xs: 0.5rem;
  --space-s:  0.875rem;
  --space-m:  1.5rem;
  --space-l:  2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;

  --measure: 66ch;
}

/* Inverted sections: the espresso ground carried over from the manual's
   Quick Reference and host-guide cover. Use once or twice per page, not
   as an alternating rhythm. */
.on-espresso {
  --paper: #3B3125;
  --card:  #453A2C;
  --ink:       #EDE5D7;
  --ink-soft:  #C9BEAC;
  --espresso:  #F2ECE2;
  --sepia:     #DCCFB6;
  --rule:      #6A5B45;
  --rule-soft: #554836;
  --gold-deep: #C4A46A;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--display);
  color: var(--espresso);
  font-weight: 400;
  line-height: 1.15;
}

/* Letterspaced serif caps — the brand's headline treatment */
.display-caps {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--sepia);
}

.hairline {
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Footer / section-divider mark used on the manual and business cards */
.diamond-mark::before {
  content: '\25C6\25C6\25C6';
  color: var(--gold);
  letter-spacing: 0.35em;
  font-size: var(--step--1);
}

/* Toile ornament: always bleeding off an edge, never floated in content */
.toile {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.42;
}
.toile--tl { top: -3rem; left: -4rem; width: 18rem; }
.toile--tr { top: -3.5rem; right: -3.5rem; width: 17rem; transform: scaleX(-1); }
.toile--bl { bottom: -2.5rem; left: -3rem; width: 14rem; }
.toile--br { bottom: -2.5rem; right: -3rem; width: 14rem; transform: scaleX(-1); }
.toile--faint { opacity: 0.26; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}