:root {
 
  /* --- Primary (Red) --- */
  --primary-50:      #fcebed;
  --primary-100:     #f8d2d7;
  --primary-200:     #f1a6af;
  --primary-300:     #ea7a87;
  --primary-400:     #e25e6e;
  --primary-default: #d14a5c;
  --primary-600:     #b84052;
  --primary-700:     #9e3647;
  --primary-800:     #852c3d;
  --primary-900:     #6b2232;
 
  /* --- Secondary (Blue) --- */
  --secondary-50:      #e8ebf0;
  --secondary-100:     #c5ccd8;
  --secondary-200:     #9ea9be;
  --secondary-300:     #7685a4;
  --secondary-400:     #586a8f;
  --secondary-default: #162641;
  --secondary-600:     #13223a;
  --secondary-700:     #101c31;
  --secondary-800:     #0d1728;
  --secondary-900:     #09111f;
 
  /* --- Neutral: White --- */
  --neutral-white-50:      #ffffff;
  --neutral-white-100:     #fdfcfb;
  --neutral-white-200:     #fbf9f7;
  --neutral-white-300:     #f8f6f3;
  --neutral-white-400:     #f4f1ed;
  --neutral-white-default: #f0eeea;
  --neutral-white-600:     #eae7e3;
  --neutral-white-700:     #e3dfda;
  --neutral-white-800:     #dbd6d1;
  --neutral-white-900:     #d2ccc6;
 
  /* --- Neutral: Gray --- */
  --neutral-gray-50:      #f6f4f1;
  --neutral-gray-100:     #edeae6;
  --neutral-gray-200:     #e2ded9;
  --neutral-gray-300:     #d6d1cb;
  --neutral-gray-400:     #bfb9b2;
  --neutral-gray-default: #a8a29b;
  --neutral-gray-600:     #8f8982;
  --neutral-gray-700:     #6f6963;
  --neutral-gray-800:     #4e4945;
  --neutral-gray-900:     #2f2a27;
 
  /* --- Neutral: Black --- */
  --neutral-black-50:      #050101;
  --neutral-black-100:     #070202;
  --neutral-black-200:     #0a0303;
  --neutral-black-300:     #0c0303;
  --neutral-black-400:     #0e0404;
  --neutral-black-default: #0f0404;
  --neutral-black-600:     #140707;
  --neutral-black-700:     #1a0c0c;
  --neutral-black-800:     #231414;
  --neutral-black-900:     #2a1818;
 
  /* --- Error --- */
  --error-50:      #fff1f1;
  --error-100:     #ffe0e0;
  --error-200:     #ffc2c2;
  --error-300:     #ff9a9a;
  --error-400:     #ff5c5c;
  --error-default: #ff0000;
  --error-600:     #e00000;
  --error-700:     #b80000;
  --error-800:     #8f0000;
  --error-900:     #660000;
}
 
/* ============================================================
   MAPPED — Component-level semantic tokens
   References alias variables
   ============================================================ */
:root {
 
  /* --- Text --- */
  --text-heading:                    var(--primary-default);
  --text-body:                       var(--neutral-black-default);
  --text-on-action:                  var(--neutral-white-default);
  --text-on-disabled:                var(--neutral-black-default);
  --text-disabled:                   var(--neutral-gray-400);
  --text-disabled-hover:             var(--neutral-gray-600);
  --text-action-primary:             var(--primary-default);
  --text-action-primary-hover:       var(--primary-700);
  --text-action-primary-pressed:     var(--primary-800);
  --text-action-secondary:           var(--secondary-default);
  --text-action-secondary-hover:     var(--secondary-700);
  --text-action-secondary-pressed:   var(--secondary-800);
  --text-error:                      var(--error-default);
 
  /* --- Surface --- */
  --surface-default:                    var(--neutral-white-default);
  --surface-default-hover:              var(--neutral-white-700);
  --surface-primary:                    var(--primary-100);
  --surface-disabled:                   var(--neutral-gray-400);
  --surface-disabled-hover:             var(--neutral-gray-600);
  --surface-disabled-hover-2:           var(--neutral-gray-100);
  --surface-action-primary:             var(--primary-default);
  --surface-action-primary-hover:       var(--primary-700);
  --surface-action-primary-hover-2:     var(--primary-200);
  --surface-action-primary-pressed:     var(--primary-800);
  --surface-action-secondary:           var(--secondary-default);
  --surface-action-secondary-hover:     var(--secondary-700);
  --surface-action-secondary-hover-2:   var(--secondary-100);
  --surface-action-secondary-pressed:   var(--secondary-800);
  --surface-error:                      var(--error-100);
 
  /* --- Icon --- */
  --icon-default:           var(--neutral-white-default);
  --icon-default-2:         var(--neutral-black-default);
  --icon-disabled:          var(--neutral-gray-400);
  --icon-disabled-hover:    var(--neutral-gray-600);
  --icon-primary:           var(--primary-default);
  --icon-primary-hover:     var(--primary-700);
  --icon-primary-pressed:   var(--primary-800);
  --icon-secondary:         var(--secondary-default);
  --icon-secondary-hover:   var(--secondary-700);
  --icon-secondary-pressed: var(--secondary-800);
  --icon-error:             var(--error-default);
 
  /* --- Border --- */
  --border-primary:                    var(--neutral-gray-200);
  --border-secondary:                  var(--primary-default);
  --border-disabled:                   var(--neutral-gray-400);
  --border-disabled-hover:             var(--neutral-gray-600);
  --border-action-primary:             var(--primary-default);
  --border-action-primary-hover:       var(--primary-700);
  --border-action-primary-focus:       var(--primary-700);
  --border-action-primary-pressed:     var(--primary-800);
  --border-action-secondary:           var(--secondary-default);
  --border-action-secondary-hover:     var(--secondary-700);
  --border-action-secondary-focus:     var(--secondary-700);
  --border-action-secondary-pressed:   var(--secondary-800);
  --border-error:                      var(--error-default);
}
 