/* ==========================================================================
   Quirk — Color tokens
   Primary = Quirk Red. Blue / Green / Yellow are ACCENTS ONLY.
   Ink = Slate. Surfaces lean warm cream.
   ========================================================================== */

:root {
  /* --- Brand: Quirk Red (primary) ----------------------------------------- */
  --red-50:  #FDEEE9;
  --red-100: #FBD9CF;
  --red-200: #F7B0A0;
  --red-300: #F38068;
  --red-400: #EF583B;
  --red-500: #EA3D17;  /* core brand red */
  --red-600: #CF3310;  /* hover */
  --red-700: #AC2A0C;  /* press */
  --red-800: #84230C;

  /* --- Accent: Blue ------------------------------------------------------- */
  --blue-50:  #EAF1FF;
  --blue-100: #CFE0FF;
  --blue-500: #3E82FF;
  --blue-600: #2E6BE0;

  /* --- Accent: Green (lime) ----------------------------------------------- */
  --green-50:  #F2F8DC;
  --green-100: #E2F0B0;
  --green-500: #B2D51A;
  --green-600: #97B70F;

  /* --- Accent: Yellow ----------------------------------------------------- */
  --yellow-50:  #FFF6D6;
  --yellow-100: #FFE9A3;
  --yellow-500: #FFC800;
  --yellow-600: #E0AC00;

  /* --- Ink: Slate --------------------------------------------------------- */
  --slate-900: #2A313B;  /* primary ink (brand dark) */
  --slate-800: #3A434F;
  --slate-700: #4E5866;
  --slate-600: #6B7585;
  --slate-500: #8B95A3;
  --slate-400: #AEB6C1;

  /* --- Warm neutrals (surfaces & borders) --------------------------------- */
  --cream-0:   #FFFFFF;
  --cream-50:  #FBF8F2;  /* off-white warm */
  --cream-100: #F4EFE7;  /* brand cream surface */
  --cream-200: #ECE5D8;  /* hairline / soft border on cream */
  --cream-300: #DED5C4;  /* border */
  --cream-400: #C9BEA9;

  /* ====================================================================== */
  /* Semantic aliases                                                       */
  /* ====================================================================== */

  /* Brand */
  --brand:           var(--red-500);
  --brand-hover:     var(--red-600);
  --brand-press:     var(--red-700);
  --brand-tint:      var(--red-50);

  /* Text */
  --text-strong:     var(--slate-900);
  --text-body:       var(--slate-800);
  --text-muted:      var(--slate-600);
  --text-faint:      var(--slate-500);
  --text-on-brand:   #FFFFFF;
  --text-on-dark:    #F4EFE7;
  --text-link:       var(--red-600);

  /* Surfaces */
  --surface-page:    var(--cream-100);
  --surface-card:    var(--cream-0);
  --surface-soft:    var(--cream-50);
  --surface-sunken:  var(--cream-200);
  --surface-dark:    var(--slate-900);
  --surface-brand:   var(--red-500);

  /* Borders */
  --border-soft:     var(--cream-200);
  --border:          var(--cream-300);
  --border-strong:   var(--cream-400);
  --border-focus:    var(--red-500);

  /* Accent semantic (use sparingly, one accent per surface) */
  --accent-blue:     var(--blue-500);
  --accent-green:    var(--green-500);
  --accent-yellow:   var(--yellow-500);

  /* Status (mapped onto brand-adjacent hues) */
  --success:         var(--green-600);
  --success-tint:    var(--green-50);
  --warning:         var(--yellow-600);
  --warning-tint:    var(--yellow-50);
  --danger:          var(--red-600);
  --danger-tint:     var(--red-50);
  --info:            var(--blue-500);
  --info-tint:       var(--blue-50);
}