/* ============================================================
   9/11 Legacy Foundation — Color Tokens
   Primary palette symbolizes resilience, honor, and remembrance;
   the accent adds warmth and depth.
   ============================================================ */

:root {
  /* ---- Brand primitives (from Short Branding Guide) ---- */
  --valor-red: #b45454;       /* Courage, sacrifice, remembrance.  Pantone 7524C */
  --honor-blue: #286997;      /* Trust, dedication, service.       Pantone 647C  */
  --legacy-navy: #15243f;     /* Strength, resilience, endurance.  Pantone 289C  */
  --tribute-tan: #987c53;     /* History, tradition, reflection.   Pantone 874C  */

  /* ---- Valor Red scale ---- */
  --red-50:  #f7eaea;
  --red-100: #eccccc;
  --red-200: #dca8a8;
  --red-300: #cd8585;
  --red-400: #c06d6d;
  --red-500: #b45454;   /* base */
  --red-600: #9a4444;
  --red-700: #7c3636;
  --red-800: #5d2929;
  --red-900: #3f1c1c;

  /* ---- Honor Blue scale ---- */
  --blue-50:  #e7eff5;
  --blue-100: #c2d6e5;
  --blue-200: #8fb2cd;
  --blue-300: #5d8fb5;
  --blue-400: #3a7aa6;
  --blue-500: #286997;   /* base */
  --blue-600: #225a82;
  --blue-700: #1b4767;
  --blue-800: #14344c;
  --blue-900: #0e2334;

  /* ---- Legacy Navy scale ---- */
  --navy-50:  #e6e9ef;
  --navy-100: #c1c8d6;
  --navy-200: #8f9bb3;
  --navy-300: #5d6c8c;
  --navy-400: #364667;
  --navy-500: #15243f;   /* base */
  --navy-600: #111d33;
  --navy-700: #0d1727;
  --navy-800: #09101b;
  --navy-900: #050810;

  /* ---- Tribute Tan scale ---- */
  --tan-50:  #f4f0e9;
  --tan-100: #e6dcc9;
  --tan-200: #d0bd9c;
  --tan-300: #ba9e6f;
  --tan-400: #a98a5f;
  --tan-500: #987c53;   /* base */
  --tan-600: #816844;
  --tan-700: #665236;
  --tan-800: #4a3c27;
  --tan-900: #2f2619;

  /* ---- Neutrals (warm-leaning, anchored to navy) ---- */
  --white:    #ffffff;
  --paper:    #faf8f4;   /* warm off-white page background */
  --sand:     #f2ede4;   /* subtle warm surface */
  --gray-50:  #f5f6f7;
  --gray-100: #e9ebee;
  --gray-200: #d7dbe0;
  --gray-300: #b9c0c9;
  --gray-400: #8b95a3;
  --gray-500: #646f7e;
  --gray-600: #4a5360;
  --gray-700: #353c46;
  --gray-800: #21262e;
  --black:    #0b0f16;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Text */
  --text-strong:   var(--legacy-navy);   /* headings, primary text */
  --text-body:     #2d3340;              /* body copy */
  --text-muted:    var(--gray-500);      /* captions, meta */
  --text-subtle:   var(--gray-400);      /* disabled, hints */
  --text-inverse:  var(--white);         /* text on dark surfaces */
  --text-link:     var(--honor-blue);
  --text-accent:   var(--tribute-tan);

  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-sunken:  var(--sand);
  --surface-dark:    var(--legacy-navy);
  --surface-dark-2:  var(--navy-600);
  --surface-brand:   var(--honor-blue);

  /* Borders & dividers */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-dark:    var(--navy-400);
  --border-gold:    var(--tribute-tan);

  /* Interactive — primary (Honor Blue) */
  --action-primary:        var(--honor-blue);
  --action-primary-hover:  var(--blue-600);
  --action-primary-active: var(--blue-700);

  /* Interactive — accent (Valor Red) for high-emphasis CTAs / Donate */
  --action-accent:         var(--valor-red);
  --action-accent-hover:   var(--red-600);
  --action-accent-active:  var(--red-700);

  /* Focus ring */
  --focus-ring: var(--blue-300);

  /* Semantic status */
  --success:  #3f7d52;
  --warning:  var(--tribute-tan);
  --danger:   var(--valor-red);
  --info:     var(--honor-blue);
}