/*
 * EMS 2027 – design tokens (colors only)
 *
 * Use in HTML (load before other site CSS):
 *   <link rel="stylesheet" href="css/token.css" />
 *
 * Use inside another stylesheet (first line of that file):
 *   @import url('token.css');
 */

:root {
  /* Page backgrounds */
  --color-bg: #faf7f5;
  --color-bg-dark: #f0ebe6;
  --color-off-white: #f5f2ee;

  /* Text */
  --color-text-primary: #141414;
  --color-text-secondary: #5a5a5a;
  --color-text-body: #282828;
  --color-text-muted: #303030;
  --color-text-dark: #1d1d1d;
  --color-text-heading: #222222;

  /* Brand / titles / CTAs (maroon family) */
  --color-maroon: #5c0e0e;
  --color-maroon-hover: #8b3d3d;
  --color-title: #4f0010;
  --color-red: #8b1538;
  --color-red-hover: #a01845;

  /* Orange / saffron accents */
  --color-tag-bg: #fff0e0;
  --color-tag-orange: #c45c1a;
  --color-accent-orange: #d46220;
  --color-orange: #d46220;

  /* Neutrals / UI */
  --color-white: #ffffff;
  --color-gray: #e0ddd8;
  --color-gray-mid: #9a9590;
  --color-gray-border: #d0d0d0;
  --color-gray-border-strong: #bcbcbc;
  --color-gray-divider: #969696;
  --color-placeholder: #b8b8b8;
  --color-card-bg: #f5f5f5;

  /* Footer / accents */
  --color-footer-bg: #590505;
  --color-footer-heading: #f49c24;
  --color-yellow: #ffd700;
}