/* ============================================================
   APG — COLOR TOKENS
   Derived from the Advanced Planning Group logo:
   deep navy letterforms + a copper/bronze swoosh, on warm paper.
   ============================================================ */
:root {
  /* --- Navy (primary brand) ------------------------------- */
  --navy-950: #060F22;
  --navy-900: #0B1730;
  --navy-800: #12213F;
  --navy-700: #1B2A4A;   /* core brand navy — the "APG" letterforms */
  --navy-600: #263A63;
  --navy-500: #35507F;
  --navy-400: #5B739B;
  --navy-300: #93A6C1;
  --navy-200: #C4CFDE;
  --navy-100: #E4EAF1;
  --navy-50:  #F2F5F9;

  /* --- Copper (accent — the swoosh) ---------------------- */
  --copper-800: #7C420C;
  --copper-700: #9A5410;
  --copper-600: #B5651D;
  --copper-500: #C06000;   /* core brand copper */
  --copper-400: #C9905E;
  --copper-300: #DDB48A;
  --copper-200: #ECD4BB;
  --copper-100: #F6E9DA;

  /* --- Warm neutrals (paper & ink) ---------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8F4;
  --neutral-100: #F3EFE7;
  --neutral-200: #E6E0D4;
  --neutral-300: #D2CABA;
  --neutral-400: #A79E8C;
  --neutral-500: #7C7566;
  --neutral-600: #59544A;
  --neutral-700: #403C35;
  --neutral-800: #2A2822;
  --neutral-900: #1A1915;

  /* --- Semantic status ---------------------------------- */
  --green-600:  #3F7D5A;
  --green-100:  #E3EFE7;
  --amber-600:  #B4831F;
  --amber-100:  #F6ECD4;
  --red-600:    #A63A34;
  --red-100:    #F5E1DF;

  /* ==========================================================
     SEMANTIC ALIASES — reference these in components
     ========================================================== */
  /* Brand */
  --brand-primary:      var(--navy-700);
  --brand-primary-deep: var(--navy-900);
  --brand-accent:       var(--copper-500);
  --brand-accent-deep:  var(--copper-700);

  /* Surfaces */
  --surface-page:    var(--neutral-50);   /* warm paper background */
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--navy-900);
  --surface-accent-soft: var(--copper-100);
  --surface-brand-soft:  var(--navy-50);

  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-onbrand:  #FBFAF7;
  --text-accent:   var(--copper-700);
  --text-link:     var(--copper-700);
  --text-link-hover: var(--copper-800);

  /* Borders & lines */
  --border-hairline: var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--navy-700);
  --border-accent:   var(--copper-500);
  --divider:         var(--neutral-200);

  /* Focus */
  --focus-ring: color-mix(in srgb, var(--copper-500) 55%, transparent);
}