/* AFFM S.A. design tokens - Web2 architecture, AFFM palette */
:root {
  --ink:    #4E4A47;   /* charcoal */
  --ink-2:  #4E4A47;
  --ink-3:  #6B6763;
  --ink-4:  #B6BAAA;   /* sage / muted */
  --bone:   #F5F5F2;   /* off-white */
  --paper:  #FFFFFF;
  --hair:   #DADCD5;   /* light grey border */
  --hair-2: #E7E9E2;

  --affm:        #87906B;   /* olive green (brand-primary) */
  --affm-darken: #6E7557;
  --affm-hover:  #7B8460;
  --affm-tint:   #EEF0E8;   /* pale olive tint */
  --signal:      #D2B032;   /* AFFM gold accent */
  --negative:    #C25B3A;

  --bg:     var(--bone);
  --fg:     var(--ink);
  --muted:  var(--ink-3);
  --rule:   var(--hair);
  --accent: var(--affm);

  --display: Georgia, "Times New Roman", serif;
  --sans:    Calibri, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:    var(--sans);

  --gut: clamp(16px, 2.6vw, 40px);
  --max: 1280px;
  /* Left edge of the centered MudContainer.Large content (max-width --max,
     24px gutter at >=960px) - full-bleed sections use it as padding-left so
     their text aligns with the page content (round-2 R3). 100vw includes the
     scrollbar, so classic-scrollbar browsers sit ~8px right; acceptable. */
  --container-align: max(24px, calc((100vw - var(--max)) / 2 + 24px));
  --pad-y: clamp(24px, 3vw, 52px);
  --ease-out: cubic-bezier(.2, .7, .15, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}