/* IN Design System — Color tokens
   Flat, saturated color blocks — never gradients, never drop shadows for color.
   Rule: one saturated accent per section/card, paired with paper or ink text.
   Teal is reserved for interactive/link meaning across all pages. */

:root {
  /* ---- Foundation ---- */
  --color-paper:      #FAF4E2; /* primary background */
  --color-paper-dim:  #F3EAD0; /* secondary/recessed background */
  --color-ink:        #1A1613; /* primary text + dark sections */
  --color-ink-12:     rgba(26, 22, 19, 0.12); /* hairlines on paper */
  --color-ink-20:     rgba(26, 22, 19, 0.20); /* hairlines on ink */
  --color-ink-40:     rgba(26, 22, 19, 0.40); /* muted text on paper */

  /* ---- Primary accent ---- */
  --color-teal:        #1E8A86; /* links, CTAs, kickers, focus rings */
  --color-teal-dark:   #146560; /* teal hover/press */

  /* ---- Card / section accents (pick ONE per block) ---- */
  --color-magenta:  #E5188C;
  --color-deepblue: #1C6E92;
  --color-plum:     #4B2E73;
  --color-green:    #2E8B57;
  --color-yellow:   #F4C63D;
  --color-amber:    #F5A81E;
  --color-sky:      #BDDAE7;
  --color-blush:    #F7C7D7;

  /* ---- Semantic aliases ---- */
  --surface-page:       var(--color-paper);
  --surface-page-dim:   var(--color-paper-dim);
  --surface-inverse:    var(--color-ink);
  --surface-card:       var(--color-paper);
  --border-default:     var(--color-ink-12);
  --border-inverse:     var(--color-ink-20);
  --border-focus:       var(--color-teal);

  --text-primary:        var(--color-ink);
  --text-primary-inverse: var(--color-paper);
  --text-muted:          var(--color-ink-40);
  --text-link:           var(--color-teal);
  --text-link-hover:     var(--color-magenta);

  --accent-primary:     var(--color-teal);
  --accent-primary-hover: var(--color-teal-dark);
}