:root {
  /* ---- Brand base palette ---- */
  --red-700: #8A1A21;   /* pressed / dark */
  --red-600: #A82028;   /* PRIMARY — Pantone 7621 C */
  --red-500: #C0353D;   /* hover */
  --red-100: #F6E4E5;   /* tint surface */
  --red-50:  #FBF2F2;   /* faint wash */

  --gray-700: #4C5959;  /* dark gray text */
  --gray-600: #687878;  /* SECONDARY — Pantone 444 C */
  --gray-400: #9AA6A6;  /* muted */
  --gray-200: #D7DEDE;  /* borders */
  --gray-100: #EBEFEF;  /* subtle fill */
  --gray-50:  #F5F7F7;  /* page tint */

  --ink:    #2A2D2D;    /* primary text */
  --white:  #FFFFFF;
  --black:  #1A1C1C;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--red-600);
  --color-primary-hover:  var(--red-500);
  --color-primary-press:  var(--red-700);
  --color-primary-tint:   var(--red-100);

  --color-secondary:      var(--gray-600);
  --color-secondary-dark: var(--gray-700);

  --text-strong:   var(--ink);
  --text-body:     #3A3F3F;
  --text-muted:    var(--gray-600);
  --text-faint:    var(--gray-400);
  --text-on-primary: var(--white);
  --text-link:     var(--red-600);

  --surface-page:    var(--white);
  --surface-tint:    var(--gray-50);
  --surface-card:    var(--white);
  --surface-inverse: var(--ink);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-400);
  --border-focus:  var(--red-600);

  /* ---- Status ---- */
  --color-success: #2E7D5B;
  --color-warning: #C77A18;
  --color-danger:  #B3261E;
  --color-info:    var(--gray-600);
}